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

interface InfoPanelProps {
  title?: string
  icon?: ReactNode
  children: ReactNode
  sx?: SxProps<Theme>
}

export function InfoPanel({ title, icon, children, sx }: InfoPanelProps) {
  return (
    <Paper
      variant="outlined"
      sx={{ borderRadius: 1.5, overflow: 'hidden', ...sx }}
    >
      {title && (
        <>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 2, py: 1.25 }}>
            {icon}
            <Typography sx={{ fontWeight: 600, fontSize: '0.8125rem', color: 'text.primary' }}>
              {title}
            </Typography>
          </Box>
          <Divider />
        </>
      )}
      <Box sx={{ p: 2 }}>{children}</Box>
    </Paper>
  )
}
