import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import type { LucideIcon } from "lucide-react";

type EmptyStateCardProps = {
  icon: LucideIcon;
  title: string;
  description: string;
  actionLabel?: string;
  onAction?: () => void;
  secondaryActionLabel?: string;
  onSecondaryAction?: () => void;
};

export function EmptyStateCard({
  icon: Icon,
  title,
  description,
  actionLabel,
  onAction,
  secondaryActionLabel,
  onSecondaryAction,
}: EmptyStateCardProps) {
  return (
    <Card className="border-primary/10 bg-[linear-gradient(135deg,rgba(245,251,247,0.98),rgba(255,255,255,0.98))]">
      <CardContent className="flex flex-col items-start gap-5 p-6 md:flex-row md:items-center md:justify-between">
        <div className="flex items-start gap-4">
          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
            <Icon className="h-6 w-6" />
          </div>
          <div className="space-y-2">
            <h2 className="text-lg font-semibold text-foreground">{title}</h2>
            <p className="max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p>
          </div>
        </div>
        {(actionLabel || secondaryActionLabel) ? (
          <div className="flex flex-wrap gap-3">
            {secondaryActionLabel && onSecondaryAction ? (
              <Button variant="outline" onClick={onSecondaryAction}>
                {secondaryActionLabel}
              </Button>
            ) : null}
            {actionLabel && onAction ? (
              <Button onClick={onAction}>{actionLabel}</Button>
            ) : null}
          </div>
        ) : null}
      </CardContent>
    </Card>
  );
}
