import { Accordion, AccordionDetails, AccordionSummary, Paper, Typography } from '@mui/material'
import { ChevronDown } from 'lucide-react'
import type { SxProps, Theme } from '@mui/material'
import type { ReactNode } from 'react'

interface DetailSection {
  title: string
  defaultExpanded?: boolean
  children: ReactNode
}

interface DetailPanelProps {
  sections: DetailSection[]
  sx?: SxProps<Theme>
}

export function DetailPanel({ sections, sx }: DetailPanelProps) {
  return (
    <Paper variant="outlined" sx={{ borderRadius: 1.5, overflow: 'hidden', ...sx }}>
      {sections.map((section, i) => (
        <Accordion
          key={i}
          defaultExpanded={section.defaultExpanded ?? i === 0}
          disableGutters
          elevation={0}
          sx={{
            '&:not(:last-child)': { borderBottom: '1px solid', borderColor: 'divider' },
            '&::before': { display: 'none' },
          }}
        >
          <AccordionSummary
            expandIcon={<ChevronDown size={16} color="#64748b" />}
            sx={{ px: 2, py: 0, minHeight: 44, '& .MuiAccordionSummary-content': { my: 0 } }}
          >
            <Typography sx={{ fontWeight: 600, fontSize: '0.8125rem' }}>
              {section.title}
            </Typography>
          </AccordionSummary>
          <AccordionDetails sx={{ px: 2, py: 1.5, borderTop: '1px solid', borderColor: 'divider' }}>
            {section.children}
          </AccordionDetails>
        </Accordion>
      ))}
    </Paper>
  )
}
