import { Box, Typography } from '@mui/material'
import { ShieldOff } from 'lucide-react'
import type { SxProps, Theme } from '@mui/material'

interface RestrictedStateProps {
  message?: string
  reason?: string
  sx?: SxProps<Theme>
}

export function RestrictedState({ message, reason, sx }: RestrictedStateProps) {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 1,
        py: 4,
        px: 2,
        textAlign: 'center',
        ...sx,
      }}
    >
      <ShieldOff size={28} color="#94a3b8" />
      <Typography sx={{ fontWeight: 600, fontSize: '0.875rem', color: 'text.secondary' }}>
        {message ?? 'Zugriff eingeschränkt'}
      </Typography>
      {reason && (
        <Typography sx={{ fontSize: '0.75rem', color: 'text.disabled', maxWidth: 280 }}>
          {reason}
        </Typography>
      )}
    </Box>
  )
}