// app/components/admin/dashboard/PeriodFilter.tsx
'use client';

interface PeriodFilterProps {
  period: '30' | '60' | '90';
  onPeriodChange: (period: '30' | '60' | '90') => void;
}

export default function PeriodFilter({ period, onPeriodChange }: PeriodFilterProps) {
  const options = [
    { value: '30', label: 'Last 30 Days' },
    { value: '60', label: 'Last 60 Days' },
    { value: '90', label: 'Last 90 Days' }
  ];

  return (
    <div className="flex space-x-2 bg-var-surface rounded-lg shadow-var-card border border-var-border p-1">
      {options.map((option) => (
        <button
          key={option.value}
          onClick={() => onPeriodChange(option.value as '30' | '60' | '90')}
          className={`px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
            period === option.value
              ? 'bg-var-primary text-white shadow-var-card'
              : 'text-var-text-secondary hover:bg-var-surface-hover'
          }`}
        >
          {option.label}
        </button>
      ))}
    </div>
  );
}