import { Card, CardContent, Typography, Box, IconButton, Collapse } from '@mui/material'
import { Info, ExpandMore, ExpandLess } from '@mui/icons-material'
import { useState } from 'react'

interface InfoCardProps {
  title: string
  children: React.ReactNode
  collapsible?: boolean
}

export default function InfoCard({ title, children, collapsible = false }: InfoCardProps) {
  const [expanded, setExpanded] = useState(!collapsible)

  return (
    <Card variant="outlined">
      <CardContent>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: collapsible && !expanded ? 0 : 2 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Info color="primary" fontSize="small" />
            <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
              {title}
            </Typography>
          </Box>
          {collapsible && (
            <IconButton size="small" onClick={() => setExpanded(!expanded)}>
              {expanded ? <ExpandLess /> : <ExpandMore />}
            </IconButton>
          )}
        </Box>
        <Collapse in={expanded}>
          <Typography variant="body2" color="text.secondary">
            {children}
          </Typography>
        </Collapse>
      </CardContent>
    </Card>
  )
}

