"use client";
import React from "react";
import { type LucideProps } from "lucide-react";

interface EmptyStateProps {
  icon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
  title: string;
  description?: string;
  action?: {
    label: string;
    onClick: () => void;
  };
  className?: string;
}

export function EmptyState({ icon: Icon, title, description, action, className = "" }: EmptyStateProps) {
  return (
    <div
      className={`flex flex-col items-center justify-center py-16 px-4 text-center ${className}`}
    >
      <div
        style={{ background: "var(--card)", border: "1px solid var(--border)" }}
        className="w-16 h-16 rounded-2xl flex items-center justify-center mb-4"
      >
        <Icon size={28} style={{ color: "var(--text-muted)" }} />
      </div>
      <h3
        style={{ color: "var(--text-primary)" }}
        className="text-base font-semibold mb-1"
      >
        {title}
      </h3>
      {description && (
        <p style={{ color: "var(--text-muted)" }} className="text-sm max-w-xs mb-6">
          {description}
        </p>
      )}
      {action && (
        <button
          onClick={action.onClick}
          style={{ background: "var(--accent)", color: "#fff" }}
          className="px-5 py-2.5 rounded-xl text-sm font-medium"
        >
          {action.label}
        </button>
      )}
    </div>
  );
}