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

interface EmptyStateProps {
  icon: ReactNode;
  title: string;
  message: string;
  action?: {
    label: string;
    onClick: () => void;
  };
}

const EmptyState: React.FC<EmptyStateProps> = ({ icon, title, message, action }) => {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        py: 8,
        px: 3,
        textAlign: 'center',
      }}
    >
      <Box
        sx={{
          fontSize: 80,
          color: 'text.disabled',
          mb: 2,
        }}
      >
        {icon}
      </Box>
      <Typography variant="h5" component="h2" gutterBottom color="text.primary">
        {title}
      </Typography>
      <Typography
        variant="body1"
        color="text.secondary"
        sx={{ mb: action ? 3 : 0, maxWidth: 500 }}
      >
        {message}
      </Typography>
      {action && (
        <Button variant="contained" color="primary" onClick={action.onClick}>
          {action.label}
        </Button>
      )}
    </Box>
  );
};

export default EmptyState;
