// AlertBanner.jsx — Alert notification banner
// Usage: <AlertBanner alerts={[...]} />

const alertBannerStyles = {
  banner: {
    background: 'rgba(254,236,126,0.08)',
    borderBottom: '1px solid rgba(254,236,126,0.2)',
    padding: '10px 28px',
    display: 'flex', alignItems: 'center', gap: 16,
    fontFamily: "'DM Sans', sans-serif",
    fontSize: 13,
  },
  dot: {
    width: 7, height: 7, borderRadius: '50%',
    background: '#FEEC7E', flexShrink: 0,
    boxShadow: '0 0 8px rgba(254,236,126,0.6)',
  },
  label: {
    fontWeight: 600, color: '#FEEC7E',
    fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
  },
  message: { color: 'rgba(240,238,233,0.8)', flex: 1 },
  time: { color: 'rgba(240,238,233,0.35)', fontSize: 11 },
  dismiss: {
    fontSize: 11, fontWeight: 500, letterSpacing: '0.06em', textTransform: 'uppercase',
    color: '#FEEC7E', cursor: 'pointer', opacity: 0.7, padding: '4px 10px',
    border: '1px solid rgba(254,236,126,0.25)', borderRadius: 3,
    transition: 'opacity 0.15s ease',
  },
};

function AlertBanner({ alerts = [], onDismiss }) {
  const [visible, setVisible] = React.useState(true);
  if (!visible || !alerts.length) return null;
  const a = alerts[0];
  return (
    <div style={alertBannerStyles.banner}>
      <div style={alertBannerStyles.dot} />
      <span style={alertBannerStyles.label}>Alert</span>
      <span style={alertBannerStyles.message}>{a.message}</span>
      <span style={alertBannerStyles.time}>{a.time}</span>
      <span
        style={alertBannerStyles.dismiss}
        onClick={() => { setVisible(false); onDismiss && onDismiss(); }}
      >Dismiss</span>
    </div>
  );
}

Object.assign(window, { AlertBanner });
