import { Product } from "./filterTypes";
import Image from "next/image";
import React from "react";
import FabricBadge from "./fabricBadge";
import RichText from "@/app/components/rich-text";

interface Props {
  product: Product;
  onClose: () => void;
  onNext: () => void;
  onPrev: () => void;
  isFirst: boolean;
  isLast: boolean;
}

const QuickViewModal: React.FC<Props> = ({
  product,
  onClose,
  onNext,
  onPrev,
  isFirst, 
  isLast
}) => (
  <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-[8px]">
    <div className="relative mx-auto flex w-full border-1 bg-white p-5 md:w-[60%]">
      <div>
        <button onClick={onClose} className="absolute top-2 right-2 text-xl">
          <i className="icon-[mi--close]"></i>
        </button>
      </div>
      <div className="grid grid-cols-12 items-center gap-2 align-middle">
        <div className="col-span-1 items-center justify-center align-middle">
          <button 
          onClick={onPrev} 
          disabled={isFirst}
          className={`mx-auto flex py-4 ${isFirst ? 'opacity-0' : 'opacity-100'}`}>
            
            <i
              className="icon-[solar--arrow-left-broken]"
              style={{ width: 32, height: 32 }}
            ></i>
          </button>
        </div>
        <div className="col-span-10 py-4 md:py-8">
          <div className="grid grid-cols-1 gap-4 md:grid-cols-5 md:gap-10">
            <div className="col-span-2">
              <div className="border-1">
                <Image
                  src={product.image}
                  alt={product.name}
                  width={600}
                  height={1000}
                  className="img-responsive"
                />
              </div>
            </div>
            <div className="col-span-3 flex flex-col gap-1">
              <div>
                <h4>{product.name}</h4>
              </div>
              {/* <div>{product.tags}</div> */}
              <div className="flex flex-wrap gap-1">
                {product.tags.map((item) => (
                  <FabricBadge key={item} type={item} />
                ))}
              </div>
              <div className="flex flex-col max-h-40 md:max-h-150 overflow-y-auto">
              <div className="mt-4">
                <div className="text-xs">{product.description}</div>
              </div>
              <div>
                <div className="text-xs font-light italic mt-5">
                  <RichText initialHtml={product.sources} />
                </div>
              </div>
              <div className="flex flex-col gap-1 text-xs mt-5">
                {Object.entries(product.attributes).map(([key, value]) => (
                  <div key={key}>
                    <span className="font-medium -tracking-wider capitalize">
                      {key}:
                    </span>{" "}
                    {value}
                  </div>
                ))}
              </div>
              </div>
              <div className="mt-2 md:mt-8">
                <button className="btn-outline">
                  Co-create with this fabric
                </button>
              </div>
            </div>
          </div>
        </div>
        <div className="col-span-1 items-center justify-center align-middle">
          <button 
          onClick={onNext} 
          disabled={isLast}
          className={`mx-auto flex py-4 ${isLast ? 'opacity-0' : 'opacity-100'}`}>
            <i
              className="icon-[solar--arrow-right-broken]"
              style={{ width: 32, height: 32 }}
            ></i>
          </button>
        </div>
      </div>
    </div>
  </div>
);

export default QuickViewModal;