web/packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx

import { cx } from "class-variance-authority"
import { Label, Radio } from "react-aria-components"

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

import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"

import { PaymentMethodIcon } from "../../Payment/PaymentMethodIcon"
import { Typography } from "../../Typography"

export type PaymentOptionProps = {
  value: string
  label: string
  type: PaymentMethodEnum
  cardNumber?: string
  hideRadioButton?: boolean
}
export function PaymentOption({
  value,
  label,
  type,
  cardNumber,
  hideRadioButton = false,
}: PaymentOptionProps) {
  return (
    <Radio
      value={value}
      className={({ isFocusVisible }) =>
        cx(styles.paymentOption, { [styles.focused]: isFocusVisible })
      }
    >
      {({ isSelected }) => (
        <>
          <div className={styles.titleContainer}>
            {!hideRadioButton && (
              <span
                className={cx(styles.radio, { [styles.selected]: isSelected })}
                aria-hidden
              />
            )}
            <Typography variant="Body/Paragraph/mdRegular">
              <Label>{label}</Label>
            </Typography>
          </div>
          <div className={styles.cardContainer}>
            {cardNumber && (
              <Typography variant="Body/Supporting text (caption)/smRegular">
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <span>•••• {cardNumber}</span>
              </Typography>
            )}
            <PaymentMethodIcon paymentMethod={type} alt={label} />
          </div>
        </>
      )}
    </Radio>
  )
}