'use client';

import { cn } from '@/lib/utils';

export type PeriodKey = 'today' | '7d' | '30d' | 'custom';

const periods: { key: PeriodKey; label: string }[] = [
  { key: 'today', label: 'Today' },
  { key: '7d', label: '7 Days' },
  { key: '30d', label: '30 Days' },
  { key: 'custom', label: 'Custom' },
];

type PeriodFilterProps = {
  value: PeriodKey;
  onChange: (value: PeriodKey) => void;
  className?: string;
};

export function PeriodFilter({ value, onChange, className }: PeriodFilterProps) {
  return (
    <div className={cn('flex gap-1 overflow-x-auto rounded-full bg-muted p-1', className)} role="tablist" aria-label="Time period">
      {periods.map(period => {
        const active = value === period.key;
        return (
          <button
            key={period.key}
            type="button"
            role="tab"
            aria-selected={active}
            onClick={() => onChange(period.key)}
            className={cn(
              'min-h-9 shrink-0 rounded-full px-3.5 text-xs font-semibold transition-colors duration-200 sm:text-sm',
              active ? 'bg-card text-navy shadow-[var(--shadow-sm)]' : 'text-muted-foreground hover:text-navy',
            )}
          >
            {period.label}
          </button>
        );
      })}
    </div>
  );
}