import { cx } from "class-variance-authority"
import Image from "next/image"
import { Radio } from "react-aria-components"

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

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

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

import type { PaymentOptionProps } from "./paymentOption"

export default function PaymentOption({
  value,
  label,
  cardNumber,
}: PaymentOptionProps) {
  return (
    <Radio
      value={value}
      className={({ isFocusVisible }) =>
        cx(styles.paymentOption, { [styles.focused]: isFocusVisible })
      }
    >
      {({ isSelected }) => (
        <>
          <div className={styles.titleContainer}>
            <span
              className={cx(styles.radio, { [styles.selected]: isSelected })}
              aria-hidden
            />
            <Body>{label}</Body>
          </div>
          {cardNumber ? (
            <>
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              <Caption color="uiTextMediumContrast">•••• {cardNumber}</Caption>
            </>
          ) : (
            <Image
              className={styles.paymentOptionIcon}
              src={PAYMENT_METHOD_ICONS[value as PaymentMethodEnum]}
              alt={label}
              width={48}
              height={32}
            />
          )}
        </>
      )}
    </Radio>
  )
}
