import { useTranslations } from "next-intl"
import { FaToolbox } from "react-icons/fa"
import {
  SKILL_CATEGORIES,
  SKILL_NAMES_BY_CATEGORY,
} from "../Home/Skills/skills.ts"
import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"

export interface CurriculumVitaeSkillsProps {}

export const CurriculumVitaeSkills: React.FC<
  CurriculumVitaeSkillsProps
> = () => {
  const t = useTranslations()

  const skills = [
    ...SKILL_CATEGORIES.map((category) => {
      const skillNames = SKILL_NAMES_BY_CATEGORY[category]
      return {
        category,
        skillNames,
      }
    }),
    {
      category: "others",
      skillNames: [
        t("fr-FR-main"),
        t("locales.en-US"),
        t("home.skills.driving-license"),
      ],
    },
  ] as const

  return (
    <CurriculumVitaeSection
      id="skills"
      title={t("home.skills.title")}
      icon={<FaToolbox size={24} />}
    >
      <ul className="list-unstyled m-0">
        {skills.map(({ category, skillNames }) => {
          return (
            <li key={category} className="card card-nested relative">
              <div className="skill-info">
                <strong>{t(`home.skills.${category}`)}</strong>

                <div className="labels mt-2">
                  {skillNames.map((skillName) => {
                    return (
                      <p key={skillName} className="label label-keyword">
                        {skillName}
                        {skillName === "Rust"
                          ? t.rich("home.skills.rust-advent-of-code", {
                              "link-aoc": (children) => {
                                return (
                                  <a
                                    href="https://github.com/theoludwig/advent_of_code"
                                    target="_blank"
                                    className="no-underline"
                                  >
                                    {children}
                                  </a>
                                )
                              },
                            })
                          : skillName === "Go"
                            ? t("home.skills.go-basics")
                            : ""}
                      </p>
                    )
                  })}
                </div>
              </div>
            </li>
          )
        })}
      </ul>
    </CurriculumVitaeSection>
  )
}