import type { CSSProperties, ReactNode } from 'react';

export interface AnnouncementProps {
  /** Bold short label rendered as a chip on the left. */
  tag?: string;
  /** Main message. */
  children: ReactNode;
  /** Optional CTA. */
  cta?: { label: string; href?: string; onSelect?: () => void };
  /** Visual variant. */
  tone?: 'accent' | 'subtle' | 'gradient';
  className?: string;
  style?: CSSProperties;
}

/**
 * `<Announcement>` — single inline marketing strip (smaller than a
 * `<BannerStack>` row, larger than a toast). Good for "What's new"
 * call-outs above the fold.
 */
export function Announcement({
  tag = 'NEW',
  children,
  cta,
  tone = 'gradient',
  className,
  style,
}: AnnouncementProps) {
  const bg =
    tone === 'gradient'
      ? 'linear-gradient(90deg, var(--bl-accent-muted, rgba(99,102,241,0.20)), var(--bl-info-muted, rgba(56,189,248,0.12)) 60%, transparent)'
      : tone === 'subtle'
        ? 'var(--bl-surface-muted, rgba(0,0,0,0.04))'
        : 'var(--bl-accent-muted, rgba(99,102,241,0.18))';

  return (
    <div
      data-testid="bl-announcement"
      role="region"
      className={className}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 'var(--bl-space-3, 12px)',
        padding: 'var(--bl-space-2, 8px) var(--bl-space-4, 16px)',
        borderRadius: 'var(--bl-radius-pill, 999px)',
        background: bg,
        fontSize: '0.82rem',
        color: 'var(--bl-text-primary, inherit)',
        ...style,
      }}
    >
      <span
        style={{
          padding: '2px 8px',
          background: 'var(--bl-accent, #6366f1)',
          color: 'var(--bl-accent-foreground, #fff)',
          fontSize: '0.65rem',
          fontWeight: 800,
          letterSpacing: '0.05em',
          borderRadius: 'var(--bl-radius-pill, 999px)',
        }}
      >
        {tag}
      </span>
      <span style={{ flex: 1, minWidth: 0 }}>{children}</span>
      {cta && (
        <a
          data-testid="bl-announcement-cta"
          href={cta.href}
          onClick={e => {
            if (cta.onSelect) {
              e.preventDefault();
              cta.onSelect();
            }
          }}
          style={{
            fontSize: '0.78rem',
            fontWeight: 700,
            color: 'var(--bl-accent, #6366f1)',
            textDecoration: 'none',
            whiteSpace: 'nowrap',
          }}
        >
          {cta.label} →
        </a>
      )}
    </div>
  );
}