import type { Period } from '@/lib/api';

const OPTIONS: { value: Period; shortLabel: string; label: string }[] = [
    { value: '24h', shortLabel: '24h', label: '24 hours' },
    { value: '7d', shortLabel: '7d', label: '7 days' },
    { value: '30d', shortLabel: '30d', label: '30 days' },
    { value: '90d', shortLabel: '90d', label: '3 months' },
];

export function TimeRangePills({ value, onChange }: { value: Period; onChange: (p: Period) => void }) {
    return (
        <div className="inline-flex rounded-xl border border-white/[0.13] bg-white/[0.06] p-0.5 sm:p-1">
            {OPTIONS.map((opt) => (
                <button
                    key={opt.value}
                    onClick={() => onChange(opt.value)}
                    className={`flex items-center justify-center min-h-[40px] sm:min-h-0 rounded-xl px-3 sm:px-4 py-1 sm:py-1.5 text-[12px] sm:text-[14px] tracking-[-0.28px] transition-all whitespace-nowrap ${
                        value === opt.value
                            ? 'bg-black/60 border border-white/[0.13] text-white'
                            : 'border border-transparent text-white/70 hover:text-white'
                    }`}
                >
                    <span className="sm:hidden">{opt.shortLabel}</span>
                    <span className="hidden sm:inline">{opt.label}</span>
                </button>
            ))}
        </div>
    );
}