import React from "react"
import SelectableCard from "./SelectableCard"
import useStore from "../utils/store"

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"

const PURPOSES: { slug: PurposeSlug; label: string; description: string }[] = [
  {
    slug: "learnpack-lesson-writer",
    label: "Understand a new topic",
    description:
      "Learn about a new concept (e.g., ISO 27001 or exponential decay).",
  },
  {
    slug: "homework-and-exam-preparation-aid",
    label: "Practice for an exam or homework",
    description: "Solve math problems or certification questions.",
  },
  {
    slug: "skill-building-facilitator",
    label: "Build real-world skills",
    description:
      "Apply concepts to projects, data science, or security audits.",
  },
  {
    slug: "certification-preparation-specialist",
    label: "Prepare for a certification",
    description: "Get ready for exams like ISO 27001 Lead Auditor.",
  },
]

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)

  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>
  )
}
