interface PeriodSelectorProps {
  value: number;
  onChange: (days: number) => void;
  animationActive: boolean;
  onAnimate: () => void;
}

const PERIODS = [
  { label: '24h', days: 1 },
  { label: '7 jours', days: 7 },
  { label: '30 jours', days: 30 },
];

export function PeriodSelector({ value, onChange, animationActive, onAnimate }: PeriodSelectorProps) {
  return (
    <div className="flex gap-1 bg-[#0f1016] border border-[#2e2f3a] rounded-lg p-1">
      {PERIODS.map(({ label, days }) => (
        <button
          key={days}
          onClick={() => onChange(days)}
          className={`
            px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer
            ${value === days
              ? 'bg-[#d4a843] text-[#0a0b0f] shadow-[0_0_12px_rgba(212,168,67,0.4)]'
              : 'text-[#6b7280] hover:text-[#d4a843] hover:bg-[#1a1b23]'
            }
          `}
        >
          {label}
        </button>
      ))}
      <div className="w-px mx-1 bg-[#2e2f3a] self-stretch" />
      <button
        onClick={onAnimate}
        className={`
          px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer
          ${animationActive
            ? 'bg-[#d4a843] text-[#0a0b0f] shadow-[0_0_12px_rgba(212,168,67,0.4)]'
            : 'text-[#6b7280] hover:text-[#d4a843] hover:bg-[#1a1b23]'
          }
        `}
      >
        ▶ Animer
      </button>
    </div>
  );
}