import { Box } from '@mui/material'
import type { Inquiry } from '../../domain/inquiry'
import { InquiryCard } from './InquiryCard'

interface InquiryCardGridProps {
  inquiries: Inquiry[]
  selectedId: string | null
  onSelect: (id: string) => void
}

export function InquiryCardGrid({ inquiries, selectedId, onSelect }: InquiryCardGridProps) {
  return (
    <Box
      sx={{
        overflowY: 'auto',
        flex: 1,
        p: 1.5,
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
        gap: 1.5,
        alignContent: 'flex-start',
      }}
    >
      {inquiries.map(inq => (
        <InquiryCard
          key={inq.id}
          inquiry={inq}
          selected={inq.id === selectedId}
          onClick={() => onSelect(inq.id)}
        />
      ))}
    </Box>
  )
}