"use client";
import { RefObject } from "react";
import Image from "next/image";
import { LinkButton } from "../form/forms";

interface Props {
  sectionRef: RefObject<HTMLDivElement | null>;
}

export default function SubHeroCoCreation({ sectionRef }: Props) {
  const handleDesignHouse = () => {
    if (sectionRef.current) {
      sectionRef.current.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <div className="relative bg-blue-600 py-10">
      <div className="absolute left-0 top-0 h-full w-full z-2 mob-noise" />
      <div className="wrapper relative z-10 ">
        
        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 md:gap-10">
          <div className="relative flex w-full">
            <Image
              src="/design-houses/playing-with-reflections.jpg"
              width={1000}
              height={1000}
              alt=""
              className="img-responsvie aspect-square"
            />
            <div className="absolute top-0 left-0 z-10 flex h-full w-full content-center items-center bg-gray-950/50 duration-300 hover:bg-gray-950/50">
              <div className="mx-auto flex w-[80%] flex-col justify-center gap-4 text-center align-middle md:w-[75%] md:gap-8">
                <div className="text-white">
                  Collaborate with Design Houses and Stylists to bring your
                  ideas into life
                </div>
                <div className="mx-auto flex w-full md:w-[60%]">
                  <button
                    className="btn-solid gray"
                    onClick={handleDesignHouse}
                  >
                    Explore Design Houses
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="relative flex w-full">
            <Image
              src="/design-houses/the-morni-way-of-life.jpg"
              width={1000}
              height={1000}
              alt=""
              className="img-responsvie aspect-square"
            />
            <div className="absolute top-0 left-0 z-10 flex h-full w-full content-center items-center bg-gray-950/50 duration-300 hover:bg-gray-950/50">
              <div className="mx-auto flex w-[80%] flex-col justify-center gap-4 text-center align-middle md:w-[75%] md:gap-8">
                <div className="text-white">
                  Start from a design and create as you find inspiration from
                  our catalog
                </div>
                <div className="mx-auto flex w-full md:w-[60%]">
                  <LinkButton
                    id="link_cc_sub_start_creating"
                    label="Start creating"
                    href="/category"
                    color="gray"
                    hairline=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}