'use client';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import type { DateRange } from '@/lib/services/analytics.service';

interface DateRangePickerProps {
  value: DateRange;
  onChange: (next: DateRange) => void;
  className?: string;
}

const OPTIONS: Array<{ value: DateRange; label: string }> = [
  { value: 'today', label: 'Today' },
  { value: '7d', label: '7d' },
  { value: '30d', label: '30d' },
  { value: '90d', label: '90d' },
];

export function DateRangePicker({ value, onChange, className }: DateRangePickerProps) {
  return (
    <div
      role="tablist"
      aria-label="Date range"
      className={cn(
        'inline-flex items-center rounded-lg border border-border bg-muted/40 p-0.5 shadow-xs',
        className,
      )}
    >
      {OPTIONS.map((opt) => {
        const active = opt.value === value;
        return (
          <Button
            key={opt.value}
            type="button"
            role="tab"
            aria-selected={active}
            variant="ghost"
            size="sm"
            onClick={() => onChange(opt.value)}
            className={cn(
              'h-7 px-3 text-xs font-medium transition-all duration-base ease-spring',
              active
                ? 'bg-background text-foreground shadow-sm'
                : 'text-muted-foreground hover:text-foreground',
            )}
            data-testid={`range-${opt.value}`}
          >
            {opt.label}
          </Button>
        );
      })}
    </div>
  );
}