import { Box, Typography } from '@mui/material'
import { CheckCircle2 } from 'lucide-react'
import type { MatchCardReason } from './MatchCardViewModel'

interface Props {
  reasons: MatchCardReason[]
  maxItems?: number
}

export function MatchReasonList({ reasons, maxItems = 3 }: Props) {
  if (reasons.length === 0) return null
  const shown = reasons.slice(0, maxItems)

  return (
    <Box>
      <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block', mb: 0.75 }}>
        Warum dieses Match
      </Typography>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
        {shown.map((r, i) => (
          <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
            <CheckCircle2 size={14} color="#1a7a4a" style={{ marginTop: 2, flexShrink: 0 }} />
            <Box>
              <Typography variant="caption" sx={{ fontWeight: 600, color: '#1a7a4a' }}>
                {r.label}
              </Typography>
              {r.explanation && (
                <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
                  {r.explanation}
                </Typography>
              )}
            </Box>
          </Box>
        ))}
      </Box>
    </Box>
  )
}