import Layout from "ui/Layout"
import Window from "ui/Layout/Window"
import Markdown from "ui/shared/Markdown"
import * as Sections from "./Sections"

const title = "Dan Finch - Expertise"

export default function Expertise() {
  return Layout(
    { title, url: "/tech" },
    Window(
      { title, flat: true },
      div(
        [
          display.flex,
          flexWrap.wrap,
          marginRight("8px"),
          paddingBottom("16px"),
          gap("8px"),
        ],
        Skillset("Core Languages", Sections.languages),
        Skillset("Platforms", Sections.platforms),
        Skillset("Frontend", Sections.frontend),
        Skillset("Backend", Sections.backend),
        Skillset("Data", Sections.data),
        Skillset("Principles", Sections.principles),
        Skillset("Architecture", Sections.architecture),
        Skillset("Delivery", Sections.delivery),
        Skillset("Quality", Sections.quality),
        Skillset("Collaboration", Sections.collaboration),
      ),
    ),
  )
}

function Skillset(title: string, markdown: Content) {
  return div(
    [
      flex(1),
      minWidth("250px"),
      display.flex,
      flexDirection.column,
      gap("4px"),
    ],
    h2(title),
    div.fieldBorder(flex(1), Markdown(markdown)),
  )
}