import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export type StepItem = {
  title: string;
  description: string;
};

export type StepsTimelineProps = {
  title: string;
  steps: StepItem[];
};

export function StepsTimeline({ title, steps }: StepsTimelineProps) {
  return (
    <Card className="h-full">
      <CardHeader>
        <CardTitle className="text-base">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <ol className="space-y-4">
          {steps.map((step, index) => (
            <li key={step.title} className="flex gap-4">
              <div className="flex h-8 w-8 items-center justify-center rounded-full border border-border/70 bg-muted/60 text-sm font-semibold">
                {index + 1}
              </div>
              <div>
                <p className="text-sm font-semibold">{step.title}</p>
                <p className="text-sm text-muted-foreground">{step.description}</p>
              </div>
            </li>
          ))}
        </ol>
      </CardContent>
    </Card>
  );
}
Ruta rápida
