Untitled

"use client";

import React from "react";
import { Button, Image } from "@nextui-org/react";
import { cn } from "@utils/cn";
import { CheckCircleIcon } from "@heroicons/react/20/solid";

export type ProductItem = {
  id: string;
  name: string;
  href: string;
  price: number;
  isNew?: boolean;
  description?: string;
  imageSrc: string;
  included?: string[];
  benefits?: string[];
};

export type ProductListItemProps = Omit<
  React.HTMLAttributes<HTMLDivElement>,
  "id"
> & {
  showBenefits: boolean;
  toggleShowBeneftis: () => void;
  isPopular?: boolean;
  removeWrapper?: boolean;
} & ProductItem;

const ProductListItem = React.forwardRef<HTMLDivElement, ProductListItemProps>(
  (
    {
      showBenefits,
      toggleShowBeneftis,
      name,
      price,
      description,
      imageSrc,
      benefits,
      isNew,
      isPopular,
      removeWrapper,
      className,
      ...props
    },
    ref
  ) => {
    return (
      <div
        ref={ref}
        className={cn(
          "relative flex w-64 max-w-full flex-none scroll-ml-6 flex-col gap-3 rounded-large bg-content1 p-4 shadow-medium",
          {
            "rounded-none bg-transparent shadow-none": removeWrapper,
          },
          className
        )}
        {...props}>
        <div
          className={cn(
            "relative flex max-h-full h-auto justify-start w-auto flex-col items-center  overflow-hidden rounded-medium bg-content2"
          )}>
          <div className="overflow-hidden rounded-large w-full">
            <Image
              removeWrapper
              loading="lazy"
              alt={name}
              className={cn(
                "z-0 h-56 max-h-full w-full overflow-hidden object-cover object-center hover:scale-110 flex items-center"
                // "z-0 h-full max-h-full w-full overflow-hidden object-cover object-center hover:scale-110",
                // {
                //   "flex h-56 items-center": isPopular,
                // }
              )}
              src={imageSrc}
            />
          </div>

          <div
            className={cn("flex flex-col gap-2 px-4 pb-4 mr-auto pt-4", {
              hidden: !isPopular,
            })}>
            <h3 className="text-xl font-semibold tracking-tight text-default-800">
              {name}
            </h3>
          </div>
        </div>
        <div className="flex flex-col gap-3 px-1">
          <div
            className={cn("flex items-center justify-between", {
              hidden: isPopular,
            })}>
            <h3 className="text-medium font-medium text-default-700">{name}</h3>
            <p className="text-medium font-medium text-default-500">${price}</p>
          </div>

          {description && !isPopular ? (
            <p className="text-small text-default-500">{description}</p>
          ) : null}

          <div className="flex gap-2 flex-col min-[400px]:flex-row">
            <Button
              fullWidth
              className="bg-default-300/20 font-medium text-default-700"
              radius="lg"
              variant="flat"
              onClick={toggleShowBeneftis}>
              Learn More
            </Button>

            <Button
              fullWidth
              className="font-medium bg-[#eb731a] hover:!bg-[#cf4a00] hover:!opacity-100 text-white"
              color="primary"
              radius="lg"
              variant={isPopular ? "flat" : "solid"}>
              Check Eligibility
            </Button>
          </div>

          {showBenefits && (
            <div className="">
              <div className="mb-3 font-medium">Benefits:</div>
              <div className="flex flex-col gap-2 dark:text-default-500">
                {benefits?.map((benefit, index) => (
                  <div key={index} className="flex gap-2 mb-1 items-start">
                    <CheckCircleIcon
                      aria-hidden
                      className="w-5 h-5 shrink-0 text-success mt-1"
                    />
                    <div className="text-block-72 m-0">{benefit}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
);

ProductListItem.displayName = "ProductListItem";

export default ProductListItem;