interface Props {
  level?: 'warning' | 'critical';
  temp?: number;
  dewPoint?: number;
}

export default function DewAlert({ level, temp, dewPoint }: Props) {
  if (!level) return null;

  const margin = temp != null && dewPoint != null ? (temp - dewPoint).toFixed(1) : null;

  return (
    <div style={{
      background: level === 'critical' ? 'rgba(224,82,82,0.2)' : 'rgba(232,192,48,0.15)',
      border: `1px solid ${level === 'critical' ? 'var(--danger)' : 'var(--warn)'}`,
      borderRadius: 4,
      padding: '10px 16px',
      display: 'flex',
      alignItems: 'center',
      gap: 10,
      fontFamily: 'var(--font-mono)',
      fontSize: 12,
      color: level === 'critical' ? 'var(--danger)' : 'var(--warn)',
    }}>
      <span style={{ fontSize: 16 }}>⚠</span>
      <span>
        DEW POINT ALERT — {level === 'critical' ? 'CRITICAL' : 'WARNING'}
        {margin && ` — Margin: ${margin}°C`}
        {level === 'critical'
          ? ' — Condensation imminent. Protect optics immediately.'
          : ' — Risk of dew forming. Enable dew heaters.'}
      </span>
    </div>
  );
}