// @design-system: domain/facets/DiscountTierFacet
'use client';

import { cn } from '@/lib/cn';
import { FacetSection } from './FacetSection';

export type DiscountTier = 50 | 60 | 70;

const TIERS: DiscountTier[] = [50, 60, 70];

export interface DiscountTierFacetProps {
  label: string;
  /** Map of tier value → display label, e.g. `{ 50: '50%+', 60: '60%+', 70: '70%+' }` */
  tierLabels: Record<DiscountTier, string>;
  selected: DiscountTier[];
  onChange: (tiers: DiscountTier[]) => void;
}

export function DiscountTierFacet({
  label,
  tierLabels,
  selected,
  onChange,
}: DiscountTierFacetProps) {
  function toggle(tier: DiscountTier) {
    const next = selected.includes(tier)
      ? selected.filter((t) => t !== tier)
      : ([...selected, tier] as DiscountTier[]);
    onChange(next);
  }

  return (
    <FacetSection label={label}>
      <div role="group" aria-label={label} className="flex flex-col gap-1">
        {TIERS.map((tier) => {
          const pressed = selected.includes(tier);
          return (
            <button
              key={tier}
              type="button"
              aria-pressed={pressed}
              onClick={() => toggle(tier)}
              className={cn(
                'flex w-full items-center rounded-md px-2 py-1.5 text-sm transition-colors',
                'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:outline-none',
                pressed
                  ? 'border-brand-primary-300 bg-brand-primary-50 text-brand-primary-700 border font-medium'
                  : 'text-text-primary hover:bg-surface-hover border border-transparent',
              )}
            >
              {tierLabels[tier]}
            </button>
          );
        })}
      </div>
    </FacetSection>
  );
}