import { Box, Button } from '@mui/material'
import type { MatchCardAction } from './MatchCardViewModel'

const MUI_VARIANT: Record<string, 'contained' | 'outlined'> = {
  primary:   'contained',
  secondary: 'outlined',
  danger:    'outlined',
}

interface Props {
  actions: MatchCardAction[]
  compact?: boolean
}

export function MatchActionToolbar({ actions }: Props) {
  if (actions.length === 0) return null

  return (
    <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 0.75, flexWrap: 'wrap' }}>
      {actions.map(action => (
        <Button
          key={action.id}
          size="small"
          variant={MUI_VARIANT[action.variant ?? 'secondary']}
          disabled={action.disabled}
          onClick={action.onClick}
          sx={
            action.variant === 'primary'
              ? { bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }
              : action.variant === 'danger'
              ? { color: '#c0392b', borderColor: '#c0392b', '&:hover': { borderColor: '#c0392b' } }
              : {}
          }
        >
          {action.label}
        </Button>
      ))}
    </Box>
  )
}