import Image from "next/image"
import { useFormContext } from "react-hook-form"

import { PAYMENT_METHOD_ICONS, PaymentMethodEnum } from "@/constants/booking"

import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import { PaymentOptionProps } from "./paymentOption"

import styles from "./paymentOption.module.css"

export default function PaymentOption({
  name,
  value,
  label,
  cardNumber,
  registerOptions = {},
}: PaymentOptionProps) {
  const { register } = useFormContext()

  return (
    <label key={value} className={styles.paymentOption}>
      <div className={styles.titleContainer}>
        <input
          aria-hidden
          hidden
          type="radio"
          id={value}
          value={value}
          {...register(name, registerOptions)}
        />
        <span className={styles.radio} />
        <Body>{label}</Body>
      </div>
      {cardNumber ? (
        <Caption color="uiTextMediumContrast">•••• {cardNumber}</Caption>
      ) : (
        <Image
          className={styles.paymentOptionIcon}
          src={PAYMENT_METHOD_ICONS[value as PaymentMethodEnum]}
          alt={label}
          width={48}
          height={32}
        />
      )}
    </label>
  )
}
