"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="px-6 py-8 bg-surface-nest-normal rounded-m flex items-center justify-between relative cursor-pointer"
      onClick={onSelect}
    >
      {isSelected &&<div className="absolute -inset-1 border border-primary-normal rounded-lg" />}
      {!!Number(discount) && <div className="absolute left-0 top-0 rounded-tl-m rounded-br-m bg-gradient-secondary-normal backdrop-blur-sm txt-bodySemibold-s px-2 py-0.5 text-background-default">
        {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;