import React from "react"
import SelectableCard from "./SelectableCard"
import useStore from "../utils/store"
import { useTranslation } from "react-i18next"

export const possiblePurposes = [
  "learnpack-lesson-writer",
  "homework-and-exam-preparation-aid",
  "skill-building-facilitator",
  "certification-preparation-specialist",
]

type PurposeSlug =
  | "learnpack-lesson-writer"
  | "homework-and-exam-preparation-aid"
  | "skill-building-facilitator"
  | "certification-preparation-specialist"

interface PurposeSelectorProps {
  onFinish: (purpose: PurposeSlug) => void
  // Optionally allow passing an initial purpose, for testability or server-side rendering
  initialPurpose?: PurposeSlug
}

export const PurposeSelector: React.FC<PurposeSelectorProps> = ({
  onFinish,
}) => {
  const formState = useStore((state) => state.formState)
  const { t } = useTranslation()

  const PURPOSES: { slug: PurposeSlug; label: string; description: string }[] =
    [
      {
        slug: "learnpack-lesson-writer",
        label: t("purposeSelector.learnpack-lesson-writer.label"),
        description: t("purposeSelector.learnpack-lesson-writer.description"),
      },
      {
        slug: "homework-and-exam-preparation-aid",
        label: t("purposeSelector.homework-and-exam-preparation-aid.label"),
        description: t(
          "purposeSelector.homework-and-exam-preparation-aid.description"
        ),
      },
      {
        slug: "skill-building-facilitator",
        label: t("purposeSelector.skill-building-facilitator.label"),
        description: t(
          "purposeSelector.skill-building-facilitator.description"
        ),
      },
      {
        slug: "certification-preparation-specialist",
        label: t("purposeSelector.certification-preparation-specialist.label"),
        description: t(
          "purposeSelector.certification-preparation-specialist.description"
        ),
      },
    ]

  return (
    <div className="w-full">
      <ul className="flex flex-row gap-4 flex-wrap">
        {PURPOSES.map((p) => (
          <SelectableCard
            key={p.slug}
            title={p.label}
            selected={formState.purpose === p.slug}
            subtitle={p.description}
            onClick={() => onFinish(p.slug)}
            className="w-full"
          />
        ))}
      </ul>
    </div>
  )
}
