import { useTranslations } from "next-intl"
import { MdWork } from "react-icons/md"
import { CurriculumVitaeSection } from "./CurriculumVitaeSection.tsx"

export interface CurriculumVitaeWorkProps {}

export const CurriculumVitaeWork: React.FC<CurriculumVitaeWorkProps> = () => {
  const t = useTranslations()

  const workExperiences = [
    {
      website: "https://ircad.fr/",
      name: "IRCAD",
      location: "1 Place de l'Hôpital, FR-67000 Strasbourg",
      position: t("curriculum-vitae.work.ircad.position"),
      dates: "28/08/2023 - 31/08/2027",
      duration: t("curriculum-vitae.work.ircad.duration"),
      tasks: [
        // t("curriculum-vitae.work.ircad.tasks.WebSurg"),
        t.rich("curriculum-vitae.work.ircad.tasks.Figma", {
          strong: (children) => {
            return <strong>{children}</strong>
          },
        }),
        t("curriculum-vitae.work.ircad.tasks.IRCAD-Core"),
        t("curriculum-vitae.work.ircad.tasks.feature-logs"),
        t.rich("curriculum-vitae.work.ircad.tasks.feature-permissions", {
          strong: (children) => {
            return <strong>{children}</strong>
          },
        }),
        t.rich("curriculum-vitae.work.ircad.tasks.feature-search", {
          strong: (children) => {
            return <strong>{children}</strong>
          },
        }),
        t.rich("curriculum-vitae.work.ircad.tasks.feature-architecture", {
          strong: (children) => {
            return <strong>{children}</strong>
          },
        }),
      ],
    },
    {
      summary: t("curriculum-vitae.work.ircad-taiwan.summary"),
      website: "https://ircadtaiwan.com.tw",
      name: "IRCAD Taiwan",
      location: "Taiwan",
      position: t("curriculum-vitae.work.ircad-taiwan.position"),
      dates: "20/07/2026 - 21/09/2026",
      duration: t("curriculum-vitae.work.ircad-taiwan.duration"),
      tasks: [],
    },
    {
      summary: t("curriculum-vitae.work.numerize.summary"),
      website: "https://numerize.com/",
      name: "Numerize",
      location: "4 Rue Sophie Germain, FR-67720 Hœrdt",
      position: t("curriculum-vitae.work.numerize.position"),
      dates: "11/04/2023 - 26/07/2023",
      duration: t("curriculum-vitae.work.numerize.duration"),
      tasks: [],
    },
  ]

  return (
    <CurriculumVitaeSection
      id="work-experience"
      title={t("curriculum-vitae.work.title")}
      icon={<MdWork size={24} />}
    >
      <ul className="list-unstyled m-0">
        {workExperiences.map((workExperience) => {
          return (
            <li key={workExperience.name} className="card card-nested">
              <p className="relative m-0">
                <strong>
                  <a href={workExperience.website} target="_blank">
                    {workExperience.name}
                  </a>
                </strong>
              </p>

              <p className="relative m-0">
                <strong>{workExperience.position}</strong>
              </p>

              <p className="text-muted m-0">
                <small>
                  <span className="space-right">
                    {workExperience.dates} ({workExperience.duration})
                  </span>
                </small>
              </p>

              {workExperience.tasks.length > 0 ? (
                <ul
                  style={{
                    paddingInlineStart: 20,
                  }}
                  className="space-y-1"
                >
                  {workExperience.tasks.map((task, index) => {
                    return <li key={index}>{task}</li>
                  })}
                </ul>
              ) : (
                <></>
              )}

              {workExperience.summary == null ? (
                <></>
              ) : (
                <div className="mt-2">
                  <p>{workExperience.summary}</p>
                </div>
              )}
            </li>
          )
        })}
      </ul>
    </CurriculumVitaeSection>
  )
}