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

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

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

import { PaymentOptionProps } from "./paymentOption"

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

export default function PaymentOption({
  name,
  value,
  label,
}: PaymentOptionProps) {
  const { register } = useFormContext()
  return (
    <label key={value} className={styles.paymentOption} htmlFor={value}>
      <div className={styles.titleContainer}>
        <input
          aria-hidden
          hidden
          type="radio"
          id={value}
          value={value}
          {...register(name)}
        />
        <span className={styles.radio} />
        <Body asChild>
          <label htmlFor={value}>{label}</label>
        </Body>
      </div>
      <Image
        className={styles.paymentOptionIcon}
        src={PAYMENT_METHOD_ICONS[value]}
        alt={label}
        width={48}
        height={32}
      />
    </label>
  )
}
