"use client";

import { cn } from "@/lib/utils";

const OPTIONS = [
  { label: "1h",  value: 1 },
  { label: "6h",  value: 6 },
  { label: "24h", value: 24 },
  { label: "7d",  value: 168 },
];

interface TimeRangePickerProps {
  value: number;
  onChange: (hours: number) => void;
  options?: { label: string; value: number }[];
}

export function TimeRangePicker({ value, onChange, options = OPTIONS }: TimeRangePickerProps) {
  return (
    <div className="flex items-center gap-0.5 rounded-md border border-border bg-muted/40 p-0.5">
      {options.map((opt) => (
        <button
          key={opt.value}
          onClick={() => onChange(opt.value)}
          className={cn(
            "px-2 py-0.5 text-[11px] font-medium rounded transition-colors",
            value === opt.value
              ? "bg-background text-foreground shadow-sm"
              : "text-muted-foreground hover:text-foreground"
          )}
        >
          {opt.label}
        </button>
      ))}
    </div>
  );
}