import { Alert, AlertTitle, Box } from '@mui/material'
import type { ReactNode } from 'react'

interface WarningPanelProps {
  title: string
  description?: string
  severity: 'warning' | 'critical'
  actions?: ReactNode
  children?: ReactNode
}

export function WarningPanel({ title, description, severity, actions, children }: WarningPanelProps) {
  return (
    <Alert
      severity={severity === 'critical' ? 'error' : 'warning'}
      sx={{ alignItems: 'flex-start' }}
    >
      <AlertTitle sx={{ fontWeight: 600, mb: description || children ? 0.5 : 0 }}>
        {title}
      </AlertTitle>
      {description && <Box sx={{ fontSize: '0.8125rem', mb: children ? 1 : 0 }}>{description}</Box>}
      {children && <Box sx={{ mt: 0.5 }}>{children}</Box>}
      {actions && <Box sx={{ mt: 1.5 }}>{actions}</Box>}
    </Alert>
  )
}
