import * as React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

export function EmptyState({
  icon,
  title,
  description,
  action,
  className,
  size = "default",
}: {
  icon?: React.ReactNode;
  title: React.ReactNode;
  description?: React.ReactNode;
  action?: React.ReactNode;
  className?: string;
  size?: "compact" | "default" | "large";
}) {
  const padding = {
    compact: "p-8",
    default: "p-12",
    large: "p-16",
  }[size];
  const iconWrap = {
    compact: "h-12 w-12 text-xl",
    default: "h-16 w-16 text-3xl",
    large: "h-20 w-20 text-4xl",
  }[size];
  return (
    <Card className={cn("border-dashed", className)}>
      <CardContent
        className={cn(
          "flex flex-col items-center justify-center text-center gap-3",
          padding,
        )}
      >
        {icon && (
          <div
            className={cn(
              "flex items-center justify-center rounded-full bg-muted text-muted-foreground",
              iconWrap,
            )}
          >
            {icon}
          </div>
        )}
        <div className="space-y-1.5">
          <h3 className="text-base md:text-lg font-semibold text-foreground">
            {title}
          </h3>
          {description && (
            <p className="text-sm text-muted-foreground max-w-md mx-auto">
              {description}
            </p>
          )}
        </div>
        {action && <div className="mt-2">{action}</div>}
      </CardContent>
    </Card>
  );
}