import { Card, CardContent } from "@/components/ui/card";
import { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

interface VendorResponseStatusCardProps {
  title: string;
  count: number;
  icon: LucideIcon;
  variant?: "default" | "primary" | "secondary" | "success" | "warning" | "destructive";
}

const variantStyles = {
  default: "border-gray-200 bg-gray-50/50",
  primary: "border-blue-200 bg-blue-50/50",
  secondary: "border-purple-200 bg-purple-50/50",
  success: "border-green-200 bg-green-50/50",
  warning: "border-yellow-200 bg-yellow-50/50",
  destructive: "border-red-200 bg-red-50/50",
};

const iconStyles = {
  default: "text-gray-600",
  primary: "text-blue-600",
  secondary: "text-purple-600",
  success: "text-green-600",
  warning: "text-yellow-600",
  destructive: "text-red-600",
};

export function VendorResponseStatusCard({
  title,
  count,
  icon: Icon,
  variant = "default",
}: VendorResponseStatusCardProps) {
  return (
    <Card className={cn("border", variantStyles[variant])}>
      <CardContent className="p-4">
        <div className="flex items-center justify-between">
          <div className="space-y-1">
            <p className="text-sm font-medium text-muted-foreground">{title}</p>
            <p className="text-2xl font-bold">{count}</p>
          </div>
          <div className={cn("p-2 rounded-full bg-white/80", iconStyles[variant])}>
            <Icon className="h-5 w-5" />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}