import { cn } from "@xtablo/shared";
import { Input } from "./input";
import { Label } from "./label";

interface TimeInputProps {
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  className?: string;
  isDisabled?: boolean;
  id?: string;
}

interface TimeInputWithLabelProps extends TimeInputProps {
  label: string;
}

export const TimeInputWithLabel = ({
  label,
  value,
  defaultValue,
  onChange,
  className,
  isDisabled,
  id = "time-picker",
}: TimeInputWithLabelProps) => {
  return (
    <div className="w-full max-w-xs space-y-2">
      <Label htmlFor={id} className="px-1">
        {label}
      </Label>
      <TimeInput
        value={value}
        defaultValue={defaultValue || "08:30:00"}
        onChange={onChange}
        className={className}
        isDisabled={isDisabled}
        id={id}
      />
    </div>
  );
};

export const TimeInput = ({
  value,
  defaultValue,
  onChange,
  className,
  isDisabled,
  id = "time-picker",
}: TimeInputProps) => {
  return (
    <Input
      type="time"
      id={id}
      step="60"
      value={value}
      defaultValue={defaultValue}
      disabled={isDisabled}
      onChange={(e) => onChange?.(e.target.value)}
      className={cn(
        "bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
        className
      )}
    />
  );
};

export default TimeInputWithLabel;
