'use client'

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from '@/components/ui/input-otp'

interface OtpInputProps {
  id?: string
  value: string
  onChange: (value: string) => void
  hasError?: boolean
}

/**
 * 6 fully-bordered individual squares — RTL-safe.
 * Each slot is its own InputOTPGroup so there are no shared/missing borders.
 */
export function OtpInput({ id, value, onChange, hasError }: OtpInputProps) {
  return (
    <InputOTP
      id={id}
      maxLength={6}
      value={value}
      onChange={onChange}
      containerClassName="flex w-full gap-2 justify-center"
    >
      {Array.from({ length: 6 }).map((_, i) => (
        <InputOTPGroup key={i}>
          <InputOTPSlot index={i} aria-invalid={hasError || undefined} />
        </InputOTPGroup>
      ))}
    </InputOTP>
  )
}