import Seperator from "@components/Seperator";
import SeperatorInner from "@components/SeperatorInner";
import SeperatorSmallInner from "@components/SeperatorSmallInner";
import Momentus from "@svg/Momentus";
import Image from "next/legacy/image";

const ProjectHeader = ({
  title,
  image,
  imageDescription,
  color,
  description,
  categoryTitle,
}: any) => {
  const defaultAltText = "Image Description";
  return (
    <section className="project-header-wrapper">
      <Seperator />
      <div className="content-fluid">
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-y-8 gap-x-14">
          <div className="project-header-left-wrapper col-span-1 lg:col-span-2">
            {categoryTitle && (
              <>
                <div className="category-title">{categoryTitle}</div>
                <SeperatorSmallInner />
              </>
            )}
            {image && (
              <div className="project-header-image-wrapper">
                <Image
                  priority={true}
                  className="object-cover absolute project-header-image"
                  src={image}
                  layout="fill"
                  sizes="50vw"
                  alt={imageDescription || defaultAltText}
                />
              </div>
            )}
          </div>
          <div className="project-header-right-wrapper col-span-1 lg:col-span-3">
            {title && (
              <>
                <h1 className={`title ${color}`}>
                  <span className="z-index-1">{title}</span>
                </h1>
                <SeperatorInner />
              </>
            )}
            {description && (
              <div
                className="text"
                dangerouslySetInnerHTML={{ __html: description }}
              ></div>
            )}
          </div>
        </div>
      </div>
      <Momentus />
    </section>
  );
};

export default ProjectHeader;