import { Box, Button, Typography } from '@mui/material'
import { AlertTriangle, RotateCcw } from 'lucide-react'
import { DS_BRAND } from '../../lib/ds'

interface Props {
  message: string
  onRetry: () => void
}

export function NeedBuilderErrorState({ message, onRetry }: Props) {
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', py: 12, gap: 3, maxWidth: 480, mx: 'auto' }}>
      <AlertTriangle size={48} color="#c0392b" />
      <Box sx={{ textAlign: 'center' }}>
        <Typography variant="h6" sx={{ fontWeight: 600, mb: 1 }}>
          Analyse fehlgeschlagen
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {message}
        </Typography>
      </Box>
      <Button
        variant="contained"
        startIcon={<RotateCcw size={16} />}
        onClick={onRetry}
        sx={{ bgcolor: DS_BRAND.main, '&:hover': { bgcolor: DS_BRAND.hoverAlt } }}
      >
        Erneut versuchen
      </Button>
    </Box>
  )
}