"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React, { useState } from "react";

import { Product, Variant } from "@/types";
import { get } from "lodash";

const ProductCard = ({ product }: { product: Product }) => {
  const [selectedVariant, setSelectedVariant] = useState<Variant>(
    product?.variants?.[0] || {}
  );

  if (!product) {
    return null;
  }

  const { title, thumbnail, variants, slug } = product;

  const menuSlug = get(product, ["menu", "slug"], "");

  const productUrl = `/menu/${menuSlug}/${slug}`;

  return (
    <div className="product-card keen-slider__slide">
      <Link href={productUrl} className="product-image-link">
        {thumbnail.url ? (
          <Image
            src={thumbnail.url}
            alt={title}
            height={thumbnail.height}
            width={thumbnail.width}
          />
        ) : (
          <img src="/Assets/Menu/no-image.jpg" alt={title} />
        )}
      </Link>
      <Link href={productUrl} className="product-title-link">
        <h3 className="product-title">{title}</h3>
      </Link>
      <p className="product-size desc">{selectedVariant.text}</p>
      <div className="card-footer">
        <h4 className="product-price">TK. {selectedVariant.price}</h4>
        {variants.length > 1 && (
          <div className="sizeToggle">
            {variants.map((variant) => (
              <button
                key={variant.id}
                className={`smallBtn ${
                  selectedVariant.id == variant.id ? "active" : ""
                }`}
                onClick={() => setSelectedVariant(variant)}
              >
                <span
                  className={`smallDot ${
                    selectedVariant.id === variant.id ? "active" : ""
                  }`}
                ></span>
                {variant.name}
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};
export default ProductCard;