import React from "react";
import { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

import { Button } from "./Button";

export interface EmptyStateProps {
  icon?: LucideIcon;
  title: string;
  description: string;
  badge?: React.ReactNode;
  action?: React.ReactNode;
  actionText?: string;
  onAction?: () => void;
  className?: string;
}

export const EmptyState: React.FC<EmptyStateProps> = ({
  icon: Icon,
  title,
  description,
  badge,
  action,
  actionText,
  onAction,
  className,
}) => {
  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center p-8 sm:p-12 text-center bg-white rounded-lg border border-dashed border-brand-border",
        className
      )}
    >
      {Icon && (
        <div className="w-14 h-14 rounded-full bg-brand-blue-light/80 text-brand-blue flex items-center justify-center mb-4 border border-blue-100">
          <Icon className="w-7 h-7" />
        </div>
      )}

      {badge && <div className="mb-3">{badge}</div>}

      <h3 className="text-base sm:text-lg font-bold text-brand-text mb-1.5">
        {title}
      </h3>
      <p className="text-sm text-brand-secondary max-w-md leading-relaxed mb-6">
        {description}
      </p>

      {action ? (
        <div className="flex items-center gap-3">{action}</div>
      ) : actionText && onAction ? (
        <Button variant="secondary" size="sm" onClick={onAction}>
          {actionText}
        </Button>
      ) : null}
    </div>
  );
};