'use client';

const PERIOD_OPTIONS = [
  { value: '7', label: '7 дней' },
  { value: '30', label: '30 дней' },
  { value: '90', label: '90 дней' },
  { value: '180', label: '180 дней' },
  { value: '365', label: '365 дней' },
] as const;

interface PeriodSelectorProps {
  period: string;
  onChange: (period: string) => void;
  availablePeriods?: Array<string | number>;
}

export default function PeriodSelector({ period, onChange, availablePeriods }: PeriodSelectorProps) {
  const allowed = new Set((availablePeriods && availablePeriods.length > 0
    ? availablePeriods
    : ['7']
  ).map((value) => String(value)));

  const periods = PERIOD_OPTIONS.filter((option) => allowed.has(option.value));

  return (
    <div className="grid w-full grid-cols-2 gap-1 rounded-lg border border-white/10 bg-black/35 p-1 backdrop-blur-md sm:flex sm:w-auto sm:flex-wrap sm:items-center">
      {periods.map((p) => (
        <button
          key={p.value}
          onClick={() => onChange(p.value)}
          className={`rounded-md px-3 py-2 text-center text-xs font-medium transition-colors sm:px-4 sm:text-sm ${
            period === p.value
              ? 'bg-white/10 text-white'
              : 'text-gray-400 hover:bg-white/[0.06] hover:text-white'
          }`}
        >
          {p.label}
        </button>
      ))}
    </div>
  );
}