import CategoryForm from "./CategoryForm";
import type { Category } from "@/lib/categories";

type CategoryStepProps = {
  category: Category;
  value: string;
  onChange: (value: string) => void;
};

export default function CategoryStep({
  category,
  value,
  onChange
}: CategoryStepProps) {
  return (
    <div className="flex flex-col gap-6">
      <div className="rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-[0_24px_60px_-40px_rgba(15,23,42,0.6)]">
        <div className="flex flex-col gap-2">
          <span className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
            {category.title}
          </span>
          <h2 className="text-2xl font-semibold text-slate-900 md:text-3xl">
            {category.prompt}
          </h2>
        </div>
        <div className="mt-4 flex items-start gap-3 rounded-2xl border border-amber-200/70 bg-amber-50/70 p-4 text-sm text-amber-900">
          <span className="mt-1 inline-flex h-6 w-6 items-center justify-center rounded-full bg-amber-200/80 text-xs font-semibold text-amber-900">
            D
          </span>
          <p>{category.tip}</p>
        </div>
      </div>
      <CategoryForm
        label={category.title}
        helper={category.helper}
        placeholder={category.placeholder}
        value={value}
        onChange={onChange}
      />
    </div>
  );
}