// Tarjeta de mensaje preventivo/informativo

export default function WarningCard({ type = 'warning', title, message }) {
  const colors = {
    warning: {
      bg: 'rgba(245,158,11,0.07)',
      border: 'rgba(245,158,11,0.2)',
      title: '#f59e0b',
      text: '#c9a855',
    },
    info: {
      bg: 'rgba(61,154,255,0.07)',
      border: 'rgba(61,154,255,0.2)',
      title: '#3d9aff',
      text: '#7aa8d4',
    },
    success: {
      bg: 'rgba(0,212,160,0.07)',
      border: 'rgba(0,212,160,0.2)',
      title: '#00d4a0',
      text: '#5ec8a8',
    },
  }

  const c = colors[type] || colors.warning

  return (
    <div style={{
      background: c.bg,
      border: `1px solid ${c.border}`,
      borderRadius: 12,
      padding: '14px 16px',
      marginBottom: 10,
    }}>
      <div style={{
        fontSize: 12,
        fontWeight: 600,
        color: c.title,
        marginBottom: 6,
      }}>
        {title}
      </div>
      <p style={{
        fontSize: 12,
        lineHeight: 1.6,
        color: c.text,
        margin: 0,
      }}>
        {message}
      </p>
    </div>
  )
}