import { useId } from "react";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/component";

function Label({ htmlFor, children, className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) {
  return (
    <label
      htmlFor={htmlFor}
      className={`inline-flex items-center gap-2 font-medium text-sm text-foreground ${className ?? ""}`}
      data-slot="label"
      {...props}
    >
      {children}
    </label>
  );
}

export default function InputOTPWithLabel() {
  const id = useId();

  return (
    <div className="flex flex-col items-center gap-2">
      <Label htmlFor={id}>Verification code</Label>
      <InputOTP aria-label="Verification code" id={id} maxLength={4}>
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
          <InputOTPSlot index={3} />
        </InputOTPGroup>
      </InputOTP>
      <p className="text-muted-foreground text-xs">
        Enter the 4-digit code sent to your email.
      </p>
    </div>
  );
}