/**
 * @fileoverview React component for SectionTitle.jsx
 * 
 * @module pages.HomePage.SectionTitle
 */

const SectionTitle = ({
  title,
  squaresColor = "brand-400",
  titleColor = "black",
  textShadowColor = "white",
}) => {
  const bgColorClass = `bg-${squaresColor}`;
  const solidColorClass = `text-${titleColor}`;

  const strokeClass =
    textShadowColor === "white"
      ? "[-webkit-text-stroke:2px_white]"
      : "[-webkit-text-stroke:2px_black]";

  return (
    <div
      className={`relative w-fit uppercase text-[2rem] md:text-[40px] font-bold`.trim()}
    >
      <div
        className={`absolute z-0 top-0 left-0 h-full w-full flex flex-row items-center gap-2`}
        aria-hidden="true"
      >
        <div className={`size-[45px] rounded-[12px] ${bgColorClass}`} />
        <div className={`h-[45px] w-full rounded-[12px] ${bgColorClass}`} />
      </div>
      <div
        className={`absolute top-0 left-0 z-10 text-transparent font-title ${strokeClass}`}
        style={{ transform: "translate(20px, 10px)" }}
        aria-hidden="true"
      >
        {title}
      </div>
      <div
        className={`relative z-20 top-4 left-6 font-title ${solidColorClass}`}
      >
        {title}
      </div>
    </div>
  );
};

export default SectionTitle;
