'use client';

import { Label } from '@/Components/ui/label';
import { TimePickerInput } from '@/Components/ui/time-picker-input';
import * as React from 'react';

interface TimePickerDemoProps {
    date: Date | undefined;
    setDate: (date: Date | undefined) => void;
    className?: string;
    showLabel?: boolean;
}

export function TimePicker({
    date,
    setDate,
    className = '',
    showLabel = true,
}: TimePickerDemoProps) {
    const minuteRef = React.useRef<HTMLInputElement>(null);
    const hourRef = React.useRef<HTMLInputElement>(null);
    const secondRef = React.useRef<HTMLInputElement>(null);

    return (
        <div className={`flex items-end gap-2 text-black ${className}`}>
            <div className="grid gap-1 text-center">
                {showLabel ? (
                    <Label htmlFor="hours" className="text-xs">
                        Ore
                    </Label>
                ) : null}
                <TimePickerInput
                    picker="hours"
                    date={date}
                    setDate={setDate}
                    ref={hourRef}
                    onRightFocus={() => minuteRef.current?.focus()}
                />
            </div>
            <div className="grid gap-1 text-center">
                {showLabel ? (
                    <Label htmlFor="minutes" className="text-xs">
                        Minuti
                    </Label>
                ) : null}
                <TimePickerInput
                    picker="minutes"
                    date={date}
                    setDate={setDate}
                    ref={minuteRef}
                    onLeftFocus={() => hourRef.current?.focus()}
                    onRightFocus={() => secondRef.current?.focus()}
                />
            </div>
        </div>
    );
}