import * as React from 'react';
import { cn } from '@/lib/utils';

export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Tiêu đề thông báo */
  title: string;
  /** Mô tả phụ */
  description?: string;
  /** Icon hoặc illustration */
  icon?: React.ReactNode;
  /** CTA tuỳ chọn */
  action?: React.ReactNode;
}

/**
 * EmptyState — hiển thị khi danh sách/bảng không có dữ liệu.
 */
export function EmptyState({ title, description, icon, action, className, ...props }: EmptyStateProps) {
  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center gap-4 py-16 text-center',
        className,
      )}
      {...props}
    >
      {icon && (
        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted text-foreground-muted">
          {icon}
        </div>
      )}
      <div className="max-w-xs space-y-1">
        <p className="text-sm font-medium text-foreground">{title}</p>
        {description && (
          <p className="text-xs text-foreground-muted">{description}</p>
        )}
      </div>
      {action && <div>{action}</div>}
    </div>
  );
}