/**
 * @ai-summary Error state component with retry functionality
 * @ai-context Centered error display with error message and retry button
 */

import React from 'react';
import { Box, Typography, Button, Alert } from '@mui/material';
import { Refresh as RefreshIcon } from '@mui/icons-material';

/**
 * Props for ErrorState component
 */
export interface ErrorStateProps {
  error: Error;
  onRetry?: () => void;
}

/**
 * Error state component for displaying errors with retry option
 *
 * @example
 * ```tsx
 * <ErrorState
 *   error={new Error('Failed to load data')}
 *   onRetry={refetch}
 * />
 * ```
 */
export const ErrorState: React.FC<ErrorStateProps> = ({ error, onRetry }) => {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        py: 8,
        px: 2,
      }}
    >
      <Alert
        severity="error"
        sx={{
          mb: 3,
          maxWidth: 600,
          width: '100%',
        }}
      >
        <Typography variant="body1" sx={{ fontWeight: 600, mb: 1 }}>
          An error occurred
        </Typography>
        <Typography variant="body2">
          {error.message || 'Something went wrong. Please try again.'}
        </Typography>
      </Alert>

      {onRetry && (
        <Button
          variant="contained"
          startIcon={<RefreshIcon />}
          onClick={onRetry}
          sx={{
            minWidth: 44,
            minHeight: 44,
            textTransform: 'none',
          }}
        >
          Retry
        </Button>
      )}
    </Box>
  );
};
