import { cn } from "clsx-tailwind-merge";
import Link from "next/link";

type CloseButtonProps = {
  className?: string;
};

const CloseButton = ({ className }: CloseButtonProps) => {
  return (
    <Link href="/" className={`${cn("group", className)}`} scroll={false}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="40"
        height="40"
        viewBox="0 0 40 40"
        fill="none"
        className="w-10 h-10"
      >
        <mask id="mask0_34_229" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
          <rect width="40" height="40" fill="#D9D9D9" />
        </mask>
        <g mask="url(#mask0_34_229)">
          <path
            d="M15.6634 26.021L13.9792 24.3452L18.31 20.006L13.9792 15.6968L15.6634 14.021L19.9942 18.3485L24.295 14.021L25.9792 15.6968L21.6484 20.006L25.9792 24.3452L24.295 26.021L19.9942 21.6935L15.6634 26.021Z"
            fill="#86888C"
            className="fill-[#86888c] group-hover:fill-light-blue"
          />
        </g>
      </svg>
    </Link>
  );
};

export default CloseButton;