"use client";

import * as React from "react";
import { Clock } from "lucide-react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { cn } from "@/lib/utils";

interface TimePickerProps {
  value: string; // format: "HH:mm"
  onChange: (value: string) => void;
  className?: string;
}

export function TimePicker({ value, onChange, className }: TimePickerProps) {
  const [hour, min] = (value || "10:00").split(":");

  const handleHourChange = (newHour: string) => {
    onChange(`${newHour}:${min}`);
  };

  const handleMinChange = (newMin: string) => {
    onChange(`${hour}:${newMin}`);
  };

  const hours = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, "0"));
  const minutes = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, "0"));

  return (
    <div className={cn("flex items-center gap-1.5", className)} dir="ltr">
      <Select value={hour} onValueChange={handleHourChange}>
        <SelectTrigger className="w-[64px] h-9 font-mono px-2 text-center shadow-none hover:bg-muted/50 transition-colors">
          <SelectValue />
        </SelectTrigger>
        <SelectContent className="max-h-[200px]">
          {hours.map((h) => (
            <SelectItem key={h} value={h} className="font-mono text-center justify-center">
              {h}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <span className="text-muted-foreground font-black text-sm pb-0.5">:</span>
      
      <Select value={min} onValueChange={handleMinChange}>
        <SelectTrigger className="w-[64px] h-9 font-mono px-2 text-center shadow-none hover:bg-muted/50 transition-colors">
          <SelectValue />
        </SelectTrigger>
        <SelectContent className="max-h-[200px]">
          {minutes.map((m) => (
            <SelectItem key={m} value={m} className="font-mono text-center justify-center">
              {m}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      
      <Clock className="w-[18px] h-[18px] ml-2 text-indigo-500/70" />
    </div>
  );
}