turash/bugulma/frontend/components/ui/EmptyState.tsx

import React from 'react';
import { clsx } from 'clsx';
import { Inbox, Search, FileX, AlertCircle } from 'lucide-react';
import Button from './Button';

export type EmptyStateType = 'default' | 'search' | 'error' | 'no-data';

export interface EmptyStateProps {
  type?: EmptyStateType;
  title?: string;
  description?: string;
  icon?: React.ReactNode;
  action?: {
    label: string;
    onClick: () => void;
  };
  className?: string;
}

const defaultIcons = {
  default: Inbox,
  search: Search,
  error: AlertCircle,
  'no-data': FileX,
};

const defaultTitles = {
  default: 'No items found',
  search: 'No results',
  error: 'Something went wrong',
  'no-data': 'No data available',
};

const defaultDescriptions = {
  default: 'Get started by creating a new item.',
  search: 'Try adjusting your search or filters.',
  error: 'Please try again later.',
  'no-data': 'There is no data to display.',
};

/**
 * Empty state component for displaying when there's no content
 */
export const EmptyState = ({
  type = 'default',
  title,
  description,
  icon,
  action,
  className,
}: EmptyStateProps) => {
  const DefaultIcon = defaultIcons[type];
  const displayIcon = icon || <DefaultIcon className="h-12 w-12 text-muted-foreground" />;
  const displayTitle = title || defaultTitles[type];
  const displayDescription = description || defaultDescriptions[type];

  return (
    <div
      className={clsx(
        'flex flex-col items-center justify-center py-12 px-4 text-center',
        className
      )}
    >
      <div className="mb-4 flex-shrink-0">{displayIcon}</div>
      <h3 className="text-lg font-semibold text-foreground mb-2">{displayTitle}</h3>
      {displayDescription && (
        <p className="text-sm text-muted-foreground max-w-sm mb-6">
          {displayDescription}
        </p>
      )}
      {action && (
        <Button variant="primary" onClick={action.onClick}>
          {action.label}
        </Button>
      )}
    </div>
  );
};