import { Box, Card, Skeleton } from '@mui/material'

interface Props {
  variant?: 'compact' | 'expanded' | 'compare-mini'
}

export function MatchCardSkeleton({ variant = 'compact' }: Props) {
  if (variant === 'compare-mini') {
    return (
      <Card sx={{ p: 1.5, minWidth: 180 }}>
        <Skeleton variant="text" width={60} sx={{ fontSize: '1.25rem', mb: 0.5 }} />
        <Skeleton variant="text" width={120} />
        <Skeleton variant="text" width={80} />
      </Card>
    )
  }

  return (
    <Card sx={{ p: 2.5, mb: 1.5 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1.5 }}>
        <Skeleton variant="text" width={60} sx={{ fontSize: '1.75rem' }} />
        <Box sx={{ display: 'flex', gap: 0.5 }}>
          <Skeleton variant="rounded" width={110} height={22} />
          <Skeleton variant="rounded" width={90} height={22} />
          <Skeleton variant="rounded" width={80} height={22} />
        </Box>
      </Box>
      <Skeleton variant="text" width="55%" sx={{ mb: 0.5 }} />
      <Skeleton variant="text" width="35%" sx={{ mb: 1.5 }} />
      {variant === 'expanded' && (
        <>
          <Skeleton variant="text" width="80%" />
          <Skeleton variant="text" width="70%" />
          <Skeleton variant="rounded" height={40} sx={{ mt: 1, mb: 1 }} />
        </>
      )}
      <Skeleton variant="rounded" height={32} sx={{ mt: 1 }} />
    </Card>
  )
}