import { Box, Button, Typography } from '@mui/material'
import { Lock } from 'lucide-react'

interface UnauthorizedStateProps {
  message?: string
  onLogin?: () => void
}

export function UnauthorizedState({ message, onLogin }: UnauthorizedStateProps) {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 1.5,
        py: 6,
        px: 3,
        textAlign: 'center',
      }}
    >
      <Lock size={36} color="#94a3b8" />
      <Typography sx={{ fontWeight: 600, fontSize: '1rem', color: 'text.primary' }}>
        Nicht berechtigt
      </Typography>
      {message && (
        <Typography sx={{ fontSize: '0.875rem', color: 'text.secondary', maxWidth: 360 }}>
          {message}
        </Typography>
      )}
      {onLogin && (
        <Button variant="outlined" size="small" onClick={onLogin}>
          Anmelden
        </Button>
      )}
    </Box>
  )
}