import { AWS_CDN_URL } from "@/utils/staticValues";
import Image from "next/image";

export default function FabricDetailHero({
  fabricFamily,
}: {
  fabricFamily: any;
}) {
  return (
    <div className="mx-auto flex w-full flex-col gap-2 pb-8 md:w-[80%] md:pb-20">
      <div className="flex flex-col">
        <h1>{fabricFamily?.name}</h1>
      </div>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-8">
        <div className="col-span-1 flex gap-4 border-t-2 items-center align-middle pt-2 md:col-span-2 md:justify-end md:text-right">
          <h3>{fabricFamily?.short_description || "Hemp"}</h3>
          <div className="w-64 md:hidden">
            <Image
              src={`${AWS_CDN_URL}/${fabricFamily?.icon ? fabricFamily.icon : "/fabric/hemp-fabric.png"}`}
              alt={fabricFamily?.alt_text || "Hemp Fabric"}
              width={200}
              height={200}
              className="img-responsive"
            />
          </div>
        </div>
        <div className="col-span-1 md:col-span-4">
          {fabricFamily?.image ? (
            <div className="">
              <video
                src={`${AWS_CDN_URL}/${fabricFamily.image}`}
                id={fabricFamily?.alt_text || "Hemp Fabric"}
                autoPlay
                muted
                loop
                playsInline
                width={900}
                height={1600}
                className="video-responsive"
              />
            </div>
          ) : (
            <div className="border-1">
              <Image
                src={`${AWS_CDN_URL}/${fabricFamily?.thumbnail_image ? fabricFamily.thumbnail_image : "/fabric/hemp-fabric.png"}`}
                alt={fabricFamily?.alt_text || "Hemp Fabric"}
                width={800}
                height={800}
                className="img-responsive"
              />
            </div>
          )}
        </div>
        <div className="col-span-1 flex flex-col gap-4 md:col-span-2">
          <div className="mx-auto flex w-[75%]">
            <div className="hidden md:flex">
              <Image
                src={`${AWS_CDN_URL}/${fabricFamily?.icon ? fabricFamily.icon : "/fabric/hemp-fabric.png"}`}
                alt={fabricFamily?.alt_text || "Hemp Fabric"}
                width={200}
                height={200}
                className="img-responsive"
              />
            </div>
          </div>
          <div className="flex flex-col gap-8 text-xs">
            <p>{fabricFamily?.description || "Hemp"}</p>
          </div>
        </div>
      </div>
    </div>
  );
}