'use client';

/* EngagementPeriodChips — phase 07 (ENG-02).
 * Purpose: 3-chip period selector (7d/30d/90d) sticky below the page H1.
 *          Maps 1:1 to data-layer period_type values D7/D30/D90 (D-04).
 * Props: period, onPeriodChange. Pure presentational — page owns refetch logic. */

export type EngagementPeriod = 'D7' | 'D30' | 'D90';

export interface EngagementPeriodChipsProps {
  period: EngagementPeriod;
  onPeriodChange: (next: EngagementPeriod) => void;
}

const CHIPS: ReadonlyArray<{ value: EngagementPeriod; label: string }> = [
  { value: 'D7',  label: '7d' },
  { value: 'D30', label: '30d' },
  { value: 'D90', label: '90d' },
];

export function EngagementPeriodChips({ period, onPeriodChange }: EngagementPeriodChipsProps) {
  return (
    <div className="sticky top-0 z-10 bg-background pt-2 pb-3 -mx-4 px-4 flex gap-2 min-h-[44px]">
      {CHIPS.map(chip => {
        const isActive = chip.value === period;
        return (
          <button
            key={chip.value}
            type="button"
            role="button"
            aria-pressed={isActive}
            onClick={() => { if (!isActive) onPeriodChange(chip.value); }}
            className={
              isActive
                ? 'bg-primary text-primary-foreground rounded-full px-3 py-1.5 text-[10px] font-semibold'
                : 'bg-muted text-foreground hover:bg-muted/80 rounded-full px-3 py-1.5 text-[10px] font-semibold'
            }
          >
            {chip.label}
          </button>
        );
      })}
    </div>
  );
}