import { useNavigate } from "react-router-dom"
import { ChefHat } from "lucide-react"

import { GlassCard } from "@/components/ui-pp/GlassCard"
import { t, ui } from "@/i18n/ui"
import { useLanguage } from "@/lib/language"

/** Navigation tile — whole card is the hit target (same pattern as KnowledgeHub). */
export function BuilderSlot() {
  const { lang } = useLanguage()
  const navigate = useNavigate()

  return (
    <GlassCard
      variant="interactive"
      className="p-4"
      onClick={() => navigate("/builder")}
      onKeyDown={(event) => {
        if (event.key === "Enter" || event.key === " ") {
          event.preventDefault()
          navigate("/builder")
        }
      }}
    >
      <div className="flex flex-col gap-3">
        <span
          className="flex h-10 w-10 items-center justify-center rounded-[var(--radius-control)]"
          style={{ backgroundImage: "var(--gradient-primary)" }}
        >
          <ChefHat className="h-5 w-5 text-[var(--ink)]" aria-hidden />
        </span>
        <div>
          <h3 className="type-title-sm text-[var(--ink)]">
            {t(ui.builderSlot.title, lang)}
          </h3>
          <p className="type-body mt-1 text-[var(--ink-soft)]">
            {t(ui.builderSlot.body, lang)}
          </p>
        </div>
      </div>
    </GlassCard>
  )
}