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

interface Props {
  title?: string
  message?: string
}

export function MatchCardRestrictedState({ title, message }: Props) {
  return (
    <Card sx={{ p: 2.5, mb: 1.5, bgcolor: '#f8fafc', border: '1px solid #e2e8f0' }}>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, py: 0.5 }}>
        <Lock size={20} color="#94a3b8" />
        <Box>
          <Typography variant="subtitle2" color="text.secondary" sx={{ fontWeight: 600 }}>
            {title ?? 'Zugriff eingeschränkt'}
          </Typography>
          <Typography variant="caption" color="text.secondary">
            {message ?? 'Sie haben keine Berechtigung, dieses Match einzusehen.'}
          </Typography>
        </Box>
      </Box>
    </Card>
  )
}