/**
 * @ai-summary Empty state component for when no data is available
 * @ai-context Centered display with icon, title, description, and optional action
 */

import React from 'react';
import { Box, Typography, Button } from '@mui/material';

/**
 * Action button configuration
 */
interface ActionConfig {
  label: string;
  onClick: () => void;
}

/**
 * Props for EmptyState component
 */
export interface EmptyStateProps {
  icon?: React.ReactNode;
  title: string;
  description: string;
  action?: ActionConfig;
}

/**
 * Empty state component for displaying when no data is available
 *
 * @example
 * ```tsx
 * <EmptyState
 *   icon={<InboxIcon fontSize="large" />}
 *   title="No Data"
 *   description="Start by adding your first item"
 *   action={{ label: 'Add Item', onClick: handleAdd }}
 * />
 * ```
 */
export const EmptyState: React.FC<EmptyStateProps> = ({
  icon,
  title,
  description,
  action,
}) => {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        py: 8,
        px: 2,
        textAlign: 'center',
      }}
    >
      {icon && (
        <Box
          sx={{
            mb: 3,
            color: 'text.secondary',
            opacity: 0.5,
            fontSize: 64,
          }}
        >
          {icon}
        </Box>
      )}

      <Typography
        variant="h6"
        component="h2"
        sx={{
          mb: 1,
          fontWeight: 600,
          color: 'text.primary',
        }}
      >
        {title}
      </Typography>

      <Typography
        variant="body2"
        color="text.secondary"
        sx={{ mb: action ? 3 : 0, maxWidth: 400 }}
      >
        {description}
      </Typography>

      {action && (
        <Button
          variant="contained"
          onClick={action.onClick}
          sx={{
            minWidth: 44,
            minHeight: 44,
            textTransform: 'none',
          }}
        >
          {action.label}
        </Button>
      )}
    </Box>
  );
};
