import { Box, Card, Typography } from '@mui/material'
import type { SxProps, Theme } from '@mui/material'
import type { ReactNode } from 'react'

interface CompactCardProps {
  title: string
  meta?: string
  leading?: ReactNode
  trailing?: ReactNode
  onClick?: () => void
  selected?: boolean
  sx?: SxProps<Theme>
}

export function CompactCard({ title, meta, leading, trailing, onClick, selected = false, sx }: CompactCardProps) {
  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',
        '&:hover': onClick ? { bgcolor: 'rgba(0,0,0,0.015)' } : {},
        ...sx,
      }}
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 1.5,
          px: 2,
          py: 1,
          minHeight: 48,
        }}
      >
        {leading && <Box sx={{ flexShrink: 0 }}>{leading}</Box>}
        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Typography sx={{ fontWeight: 500, fontSize: '0.875rem', lineHeight: 1.3 }} noWrap>
            {title}
          </Typography>
          {meta && (
            <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary', lineHeight: 1.3 }} noWrap>
              {meta}
            </Typography>
          )}
        </Box>
        {trailing && <Box sx={{ flexShrink: 0 }}>{trailing}</Box>}
      </Box>
    </Card>
  )
}