"use client";

import { cx } from "@karma/cva";
import { OTPInput } from "input-otp";
import * as React from "react";

export type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;

export const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  InputOTPProps
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cx(
      "flex items-center gap-2 has-[:disabled]:opacity-50",
      containerClassName,
    )}
    className={cx("disabled:cursor-not-allowed", className)}
    {...props}
  />
));
InputOTP.displayName = "InputOTP";