import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

export interface WelcomeStepCardProps {
  step: number;
  totalSteps: number;
  title: string;
  description?: string;
  icon?: LucideIcon;
  children?: React.ReactNode;
  className?: string;
}

export function WelcomeStepCard({
  step,
  totalSteps,
  title,
  description,
  icon: Icon,
  children,
  className,
}: WelcomeStepCardProps) {
  const progress = Math.min(Math.max(step, 1), totalSteps);
  const percent = totalSteps <= 1 ? 100 : Math.round((progress / totalSteps) * 100);

  return (
    <Card
      className={cn(
        'relative overflow-hidden rounded-3xl border border-brand-rose-soft bg-brand-card shadow-brand-primary',
        className
      )}
    >
      <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-brand-rose-soft via-[var(--brand-gold-soft)] to-brand-sky-soft" />
      <CardHeader className="space-y-4 pt-8">
        <div className="flex items-center justify-between gap-3">
          <span className="text-xs font-semibold uppercase tracking-[0.4em] text-brand-rose">
            Step {progress} / {totalSteps}
          </span>
          <div className="w-28">
            <Progress value={percent} />
          </div>
        </div>
        <div className="flex items-start gap-4">
          {Icon && (
            <span className="flex size-12 items-center justify-center rounded-full bg-brand-rose-soft text-brand-rose shadow-inner">
              <Icon className="size-5" />
            </span>
          )}
          <div className="space-y-2">
            <CardTitle className="font-display text-2xl font-semibold text-brand-slate md:text-3xl">{title}</CardTitle>
            {description && (
              <CardDescription className="text-base font-sans-marketing text-brand-navy/80">{description}</CardDescription>
            )}
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-6 pb-10">{children}</CardContent>
    </Card>
  );
}

WelcomeStepCard.displayName = 'WelcomeStepCard';