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

import { FrostedCard } from '../../components/tenant';

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 (
    <FrostedCard
      className={cn(
        'relative overflow-hidden rounded-3xl border border-white/20 text-slate-900 shadow-lg shadow-rose-200/20 dark:text-slate-100',
        className
      )}
    >
      <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1]" />
      <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-rose-300 dark:text-rose-200">
            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-rose-100/90 text-rose-500 shadow-inner shadow-rose-200/60 dark:bg-rose-500/20 dark:text-rose-200">
              <Icon className="size-5" />
            </span>
          )}
          <div className="space-y-2">
            <CardTitle className="font-display text-2xl font-semibold text-slate-900 dark:text-slate-100 md:text-3xl">{title}</CardTitle>
            {description && (
              <CardDescription className="text-base text-slate-600 dark:text-slate-400">{description}</CardDescription>
            )}
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-6 pb-10 text-slate-700 dark:text-slate-300">{children}</CardContent>
    </FrostedCard>
  );
}

WelcomeStepCard.displayName = 'WelcomeStepCard';
