import { AlertTriangle } from 'lucide-react';

interface LimitedDataNoticeProps {
  /** Number of days of GSC history we have for this site. */
  days: number;
}

/**
 * Non-blocking informational notice surfaced when GSC history is below the
 * 56-day threshold our recommendation rules need to produce strong signal.
 *
 * Uses `role="status"` rather than `role="alert"` because the situation is
 * informational, not an error — assistive tech politely picks it up without
 * interrupting whatever the user was reading. The visual styling still uses
 * amber so sighted users get the same "hmm, worth noting" cue.
 */
export function LimitedDataNotice({ days }: LimitedDataNoticeProps) {
  // DS-006: migrated from raw amber-* palette to semantic warning tokens.
  // Dark-mode rendering is now correct without manual dark: overrides —
  // semantic tokens handle both light and dark via CSS custom properties.
  return (
    <div
      role="status"
      className="flex items-start gap-2 rounded-md border border-warning-border bg-warning-soft px-3 py-2 text-sm text-warning-strong"
    >
      <AlertTriangle className="size-4 shrink-0 mt-0.5" aria-hidden="true" />
      <span>
        Limited data: {days} day{days !== 1 ? 's' : ''} of history. First analysis may show fewer
        results — best with 60+ days.
      </span>
    </div>
  );
}