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: PaymentMethodEnum
  label: string
  cardNumber?: string
}
export 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
            />
            <Typography variant="Body/Paragraph/mdRegular">
              <Label>{label}</Label>
            </Typography>
          </div>
          {cardNumber ? (
            <>
              <Typography variant={'Body/Supporting text (caption)/smRegular'}>
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <span>•••• {cardNumber}</span>
              </Typography>
            </>
          ) : (
            <PaymentMethodIcon paymentMethod={value} alt={label} />
          )}
        </>
      )}
    </Radio>
  )
}