import type { ComponentType } from "@/lib/types";
import { COMPONENT_OPTIONS } from "../model/component-options";

interface ComponentStepSectionProps {
  onSelectComponent: (component: ComponentType) => void;
}

export function ComponentStepSection({
  onSelectComponent,
}: ComponentStepSectionProps) {
  return (
    <section className="space-y-4">
      <p className="text-sm text-text-secondary">Select the component to bump:</p>
      <div className="grid grid-cols-3 gap-4 max-w-xl">
        {COMPONENT_OPTIONS.map((c) => (
          <button
            key={c.key}
            onClick={() => onSelectComponent(c.key)}
            className="group bg-surface-0 border border-surface-2 rounded-xl p-5 text-left hover:border-accent/40 hover:bg-accent/5 transition-all"
          >
            <div className="w-8 h-8 rounded-lg bg-accent/10 flex items-center justify-center mb-3 group-hover:bg-accent/20 transition-colors">
              <span className="text-accent font-bold text-sm">{c.label[0]}</span>
            </div>
            <div className="font-semibold text-text-primary">{c.label}</div>
            <div className="text-xs text-text-muted mt-1">{c.description}</div>
          </button>
        ))}
      </div>
    </section>
  );
}