property-match/src/components/cards/DecisionCard.tsx

import { Box, Card, CardActions, CardContent, Divider, Typography } from '@mui/material'
import type { SxProps, Theme } from '@mui/material'
import type { ReactNode } from 'react'
import { CardSkeleton } from '../ui/CardSkeleton'
import { RestrictedState } from '../ui/RestrictedState'

interface DecisionCardProps {
  title: string
  subtitle?: string
  badges?: ReactNode
  score?: ReactNode
  body?: ReactNode
  actions?: ReactNode
  selected?: boolean
  isLoading?: boolean
  isRestricted?: boolean
  onClick?: () => void
  sx?: SxProps<Theme>
}

export function DecisionCard({
  title,
  subtitle,
  badges,
  score,
  body,
  actions,
  selected = false,
  isLoading = false,
  isRestricted = false,
  onClick,
  sx,
}: DecisionCardProps) {
  if (isLoading) return <CardSkeleton hasActions={!!actions} />

  return (
    <Card
      onClick={onClick}
      sx={{
        outline: selected ? '2px solid #1e3a5f' : 'none',
        outlineOffset: -1,
        bgcolor: selected ? 'rgba(30,58,95,0.03)' : 'background.paper',
        cursor: onClick ? 'pointer' : 'default',
        transition: 'outline 0.1s, background-color 0.1s',
        '&:hover': onClick ? { bgcolor: 'rgba(0,0,0,0.01)' } : {},
        position: 'relative',
        ...sx,
      }}
    >
      {isRestricted ? (
        <RestrictedState sx={{ py: 5 }} />
      ) : (
        <>
          <CardContent sx={{ pb: body || actions ? 1 : 2 }}>
            <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 1 }}>
              <Box sx={{ flex: 1, minWidth: 0 }}>
                <Typography
                  sx={{ fontWeight: 600, fontSize: '0.9375rem', lineHeight: 1.3, mb: subtitle ? 0.25 : 0 }}
                  noWrap
                >
                  {title}
                </Typography>
                {subtitle && (
                  <Typography sx={{ fontSize: '0.8125rem', color: 'text.secondary', lineHeight: 1.4 }}>
                    {subtitle}
                  </Typography>
                )}
              </Box>
              {score && <Box sx={{ flexShrink: 0 }}>{score}</Box>}
            </Box>
            {badges && (
              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 1 }}>
                {badges}
              </Box>
            )}
          </CardContent>

          {body && (
            <>
              <Divider />
              <CardContent sx={{ py: 1.5 }}>{body}</CardContent>
            </>
          )}

          {actions && (
            <>
              <Divider />
              <CardActions sx={{ px: 2, py: 1 }}>{actions}</CardActions>
            </>
          )}
        </>
      )}
    </Card>
  )
}