import favicon from "public/favicon.png?url"
import linkedin from "public/icons/linkedin.svg?raw"
import github from "public/icons/github.svg?raw"
import aboutIcon from "public/icons/about.png?url"
import experienceIcon from "public/icons/experience.png?url"
import projectsIcon from "public/icons/projects.png?url"
import techIcon from "public/icons/tech.png?url"

const vr = hr(height("20px"), margin("0px 2px"))

export default function Taskbar({ url }: { url: string }) {
  return div.window(
    textWrapMode.nowrap,
    overflowX.hidden,
    margin("10px"),
    div(
      display.flex,
      alignItems.center,
      gap("2px"),
      div(
        display.flex,
        paddingLeft("4px"),
        img(
          { src: favicon },
          width("12px"),
          height("12px"),
          marginRight("4px"),
        ),
        div(fontWeight.bold, "Dan Finch"),
      ),
      vr,
      a(
        { title: "LinkedIn" },
        { href: "https://www.linkedin.com/in/danfinch/" },
        raw(linkedin),
      ),
      a(
        { title: "GitHub" },
        { href: "https://github.com/errilaz" },
        raw(github),
      ),
      vr,
      Task({
        icon: aboutIcon,
        title: "About",
        href: "/",
        active: url === "/",
      }),
      Task({
        icon: projectsIcon,
        title: "Projects",
        href: "/projects",
        active: url === "/projects",
      }),
      Task({
        icon: experienceIcon,
        title: "Experience",
        href: "/experience",
        active: url === "/experience",
      }),
      Task({
        icon: techIcon,
        title: "Tech",
        href: "/tech",
        active: url === "/tech",
      }),
    ),
  )
}

function Task({
  icon,
  title,
  href,
  active,
}: {
  icon: string
  title: Content
  href?: string
  active?: boolean
}) {
  return a.button(
    { href },
    active && className("active"),
    padding("0 4px"),
    textAlign.left,
    div(
      width("100%"),
      pad("4px"),
      display.flex,
      justifyContent.flexStart,
      img(
        { src: icon },
        width("12px"),
        height("12px"),
        marginRight("4px"),
      ),
      span(title),
    ),
  )
}