import { Alert, AlertTitle, Button, Box } from '@mui/material'
import { Refresh } from '@mui/icons-material'

interface ErrorDisplayProps {
  error: Error | string
  onRetry?: () => void
  title?: string
}

export default function ErrorDisplay({ error, onRetry, title = 'Error' }: ErrorDisplayProps) {
  const errorMessage = error instanceof Error ? error.message : error

  return (
    <Alert
      severity="error"
      action={
        onRetry && (
          <Button color="inherit" size="small" onClick={onRetry} startIcon={<Refresh />}>
            Retry
          </Button>
        )
      }
    >
      <AlertTitle>{title}</AlertTitle>
      {errorMessage}
      {error instanceof Error && error.stack && (
        <Box sx={{ mt: 1 }}>
          <details>
            <summary style={{ cursor: 'pointer', fontSize: '12px' }}>Technical Details</summary>
            <pre style={{ fontSize: '11px', marginTop: '8px', overflow: 'auto' }}>
              {error.stack}
            </pre>
          </details>
        </Box>
      )}
    </Alert>
  )
}

