"use client";

import { cn } from "@/lib/utils";
import { motion } from "framer-motion";
import { useId } from "react";

interface SectionUnderlineProps {
  className?: string;
  width?: number | string;
  height?: number | string;
  color?: string;
}

export function SectionUnderline({
  className,
  width = 220,
  height = 10,
  color = "#F9A21B", // Default orange color from SVG
}: SectionUnderlineProps) {
  const id = useId();
  const maskId = `underline-mask-${id}`;

  return (
    <div
      className={cn("relative flex justify-center overflow-hidden", className)}
      style={{ width, height }}
    >
      <svg
        preserveAspectRatio="none"
        width="100%"
        height="100%"
        viewBox="0 0 220 10.4198"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        style={{ width: typeof width === "number" ? `${width}px` : width, height: "100%" }}
      >
        <defs>
          <mask id={maskId}>
            <motion.path
              d="M5 5.2 L215 5.2"
              stroke="white"
              strokeWidth="12"
              strokeLinecap="round"
              fill="none"
              initial={{ pathLength: 0 }}
              whileInView={{ pathLength: 1 }}
              viewport={{ once: true }}
              transition={{
                duration: 0.8,
                ease: "easeOut",
              }}
            />
          </mask>
        </defs>
        <path
          d="M39.1167 3.7561C36.7146 4.20565 34.4602 4.85651 32.4271 5.76904C32.2057 5.86968 32.1385 6.01056 32.1184 6.07095C32.0848 6.1783 32.0983 6.279 32.152 6.37294C32.1855 6.43332 32.2392 6.50715 32.3533 6.55411C32.4338 6.58766 32.6418 6.61447 32.9169 6.60776C33.3866 6.60105 34.1113 6.5474 34.4602 6.5474C35.6545 6.56082 36.8488 6.55405 38.0432 6.57418C41.8476 6.64128 42.5119 6.69495 47.4033 6.6547C53.1133 6.60773 58.8368 6.52721 64.5536 6.40644C46.3835 7.41291 28.2402 8.58712 10.1908 9.68082C9.98955 9.69424 9.83521 9.86875 9.84863 10.07C9.85534 10.278 10.0365 10.4324 10.2378 10.419C52.3551 7.86924 94.9355 4.86321 137.375 4.66862C139.468 4.71559 141.555 4.76253 143.635 4.8095C156.203 5.10473 168.777 5.46038 181.331 6.01058C185.417 6.19175 189.503 6.39302 193.596 6.5809C194.804 6.63458 196.018 6.68825 197.233 6.74193C198.213 6.78218 200.735 6.92983 201.091 6.93654C201.413 6.94325 201.494 6.65476 201.5 6.64134C201.52 6.54741 201.507 6.44 201.427 6.33935C201.406 6.31252 201.353 6.23874 201.232 6.20519C201.212 6.20519 201.118 6.19174 200.923 6.17161C190.832 5.3463 180.713 4.77597 170.575 4.41365C171.937 4.42706 173.299 4.43381 174.661 4.44723C185.162 4.52774 195.69 4.81627 206.184 4.44723C208.572 4.36671 210.968 4.27274 213.35 4.15867C214.953 4.08486 219.08 4.17881 219.664 4.00436C219.932 3.93055 219.992 3.74266 219.999 3.64872C220.006 3.54136 219.986 3.42059 219.865 3.31323C219.811 3.25955 219.644 3.17237 219.328 3.10527C209.029 0.870905 196.978 1.50158 186.491 0.877568C158.007 -0.83343 129.625 0.307285 101.149 1.3473C76.5707 2.24642 51.9928 2.29337 27.4282 3.51456C18.4371 3.9574 9.16425 3.44749 0.300617 5.13836C0.0993233 5.17861 -0.0282053 5.36642 0.00534367 5.56771C0.0456024 5.76901 0.240203 5.90324 0.441496 5.86298C9.26487 4.17883 18.5043 4.69546 27.4618 4.25262C31.3468 4.05803 35.2318 3.897 39.1167 3.7561ZM115.105 4.25262C100.055 4.01777 85.005 3.89697 69.9415 3.97078C59.6085 4.01774 44.5517 2.05185 34.2857 5.80934C34.3595 5.80934 34.4198 5.80934 34.4735 5.80934C35.6679 5.82276 36.8623 5.80928 38.0566 5.83612C41.8544 5.90322 42.5186 5.95689 47.3966 5.91663C59.8701 5.80928 72.3772 5.54093 84.844 5.12492C94.9422 4.78943 105.027 4.48746 115.105 4.25262ZM216.913 3.38703C207.177 1.68274 196.139 2.19275 186.444 1.61571C157.987 -0.0952868 129.625 1.04535 101.176 2.08536C88.4605 2.55505 75.7522 2.78988 63.0506 3.0784C65.4862 3.17234 67.8145 3.23942 69.9415 3.23271C91.4733 3.12536 112.998 3.41393 134.53 3.87019C147.903 3.6689 161.275 3.59509 174.668 3.70245C185.162 3.78968 195.67 4.07149 206.164 3.70917C208.546 3.62865 210.934 3.53467 213.316 3.42061C214.128 3.38706 215.598 3.39374 216.913 3.38703Z"
          fill={color}
          clipRule="evenodd"
          fillRule="evenodd"
          mask={`url(#${maskId})`}
        />
      </svg>
    </div>
  );
}