import type { LucideIcon } from 'lucide-react';

import type { ReactNode } from 'react';

import { Card, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { cn } from '@/lib/utils';

type StatusVariant = 'pending' | 'processing' | 'completed' | 'failed';

interface StatusCardProps {
  status: StatusVariant;
  icon: LucideIcon;
  title: string;
  description?: string;
  children?: ReactNode;
  className?: string;
}

const statusStyles: Record<StatusVariant, { card: string; icon: string; title: string; description: string }> = {
  pending: {
    card: 'border-warning/30 bg-warning/10',
    icon: 'text-warning',
    title: 'text-warning',
    description: 'text-warning/80',
  },
  processing: {
    card: 'border-info/30 bg-info/10',
    icon: 'text-info',
    title: 'text-info',
    description: 'text-info/80',
  },
  completed: {
    card: 'border-success/30 bg-success/10',
    icon: 'text-success',
    title: 'text-success',
    description: 'text-success/80',
  },
  failed: {
    card: 'border-destructive/30 bg-destructive/10',
    icon: 'text-destructive',
    title: 'text-destructive',
    description: 'text-destructive/80',
  },
};

export function StatusCard({ status, icon: Icon, title, description, children, className }: StatusCardProps) {
  const styles = statusStyles[status];

  return (
    <Card className={cn(styles.card, className)}>
      <CardHeader>
        <div className="flex items-center gap-3">
          <Icon className={cn('h-6 w-6', styles.icon)} />
          <div>
            <CardTitle className={styles.title}>{title}</CardTitle>
            {description && (
              <CardDescription className={styles.description}>{description}</CardDescription>
            )}
          </div>
        </div>
        {children}
      </CardHeader>
    </Card>
  );
}