'use client'

import { Checkbox } from '@/components/ui/checkbox'

const SubscribeProductItem = ({
  title,
  subtitle,
  price,
  isSelected,
  discount,
  onSelect,
}: {
  title: string
  subtitle: string
  price: string
  isSelected: boolean
  discount: string
  onSelect: () => void
}) => {
  return (
    <div
      className="bg-surface-nest-normal rounded-m relative flex cursor-pointer items-center justify-between px-6 py-8"
      onClick={onSelect}
    >
      {isSelected && <div className="border-primary-normal absolute -inset-1 rounded-lg border" />}
      {!!Number(discount) && (
        <div className="rounded-tl-m rounded-br-m bg-gradient-secondary-normal txt-bodySemibold-s text-background-default absolute top-0 left-0 px-2 py-0.5 backdrop-blur-sm">
          {discount}% Off
        </div>
      )}
      <div className="flex items-end gap-1">
        <div className="txt-title-s">{title}</div>
        <div className="txt-label-s text-txt-secondary-normal">{subtitle}</div>
      </div>

      <div className="flex items-center gap-2">
        <div className="flex items-end">
          <div className="txt-numMonotype-l">${price.split('.')[0]}</div>
          <div className="txt-numMonotype-s"></div>
          <div className="txt-numMonotype-s">.{price.split('.')[1]}</div>
        </div>
        <Checkbox
          size="lg"
          variant="contrast"
          shape="round"
          checked={isSelected}
          className="pointer-events-none"
        />
      </div>
    </div>
  )
}

export default SubscribeProductItem
