import { Box, Button, Card, CardContent, Typography } from '@mui/material'
import type { StrongMatchItem } from '../../domain/dashboard'
import { StrongMatchMiniCard } from './StrongMatchMiniCard'

interface StrongMatchOverviewProps {
  matches: StrongMatchItem[]
  onNavigate: () => void
}

export function StrongMatchOverview({ matches, onNavigate }: StrongMatchOverviewProps) {
  return (
    <Card>
      <CardContent sx={{ p: 2.5 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Typography variant="h6" sx={{ fontWeight: 600 }}>
            Starke Matches
          </Typography>
          <Button size="small" onClick={onNavigate}>
            Alle anzeigen
          </Button>
        </Box>

        {matches.length === 0 ? (
          <Typography variant="body2" sx={{ color: 'text.secondary', py: 2, textAlign: 'center' }}>
            Keine starken Matches vorhanden.
          </Typography>
        ) : (
          matches.slice(0, 5).map(m => (
            <StrongMatchMiniCard key={m.matchId} match={m} />
          ))
        )}
      </CardContent>
    </Card>
  )
}