import { cn } from "@/lib/utils";

interface LogoProps {
  className?: string;
  variant?: "symbol" | "full";
  /** 배경과 섞이는 모드 (홈 화면 등). 로고가 흰색으로 표시됩니다. */
  blendWithBackground?: boolean;
}

export function Logo({
  className,
  variant = "full",
  blendWithBackground = false,
}: LogoProps) {
  // 색상 클래스 정의
  const mainColorClass = blendWithBackground
    ? "fill-brand-500 stroke-brand-500" // 배경 혼합 모드에서도 심볼은 브랜드 컬러 유지
    : "fill-brand-600 stroke-brand-600 dark:fill-brand-500 dark:stroke-brand-500";

  return (
    <div
      className={cn("relative flex items-center gap-2 select-none", className)}
      aria-label="JOORIN-E Logo"
    >
      <svg
        viewBox="0 0 100 100"
        xmlns="http://www.w3.org/2000/svg"
        className={cn(
          "shrink-0",
          variant === "full" ? "h-10 w-10" : "h-full w-full",
        )}
      >
        <defs>
          {/* Mask for the cutout effect around the arrow */}
          <mask id="arrow-cutout">
            <rect width="100%" height="100%" fill="white" />
            <path
              d="M10 75 C 35 45, 55 85, 90 25"
              fill="none"
              stroke="black"
              strokeWidth="12"
              strokeLinecap="round"
            />
            {/* Arrow Head Cutout */}
            <path
              d="M90 25 L 78 32 L 85 42 Z"
              fill="black"
              stroke="black"
              strokeWidth="6"
              strokeLinejoin="round"
              transform="rotate(-15 90 25)"
            />
          </mask>
        </defs>

        {/* ========== BARS (Masked) ========== */}
        <g
          mask="url(#arrow-cutout)"
          className={
            blendWithBackground
              ? "fill-brand-500" // 배경 혼합 모드에서도 브랜드 컬러 사용
              : "fill-brand-600 dark:fill-brand-500"
          }
        >
          {/* Bar 1 (Left, Short) */}
          <rect x="15" y="45" width="18" height="40" rx="4" />
          {/* Bar 2 (Middle, Medium) */}
          <rect x="41" y="30" width="18" height="55" rx="4" />
          {/* Bar 3 (Right, Tall) */}
          <rect x="67" y="10" width="18" height="75" rx="4" />
        </g>

        {/* ========== ARROW (Foreground) ========== */}
        <g className={mainColorClass}>
          {/* Arrow Path */}
          <path
            d="M10 75 C 35 45, 55 85, 90 25"
            fill="none"
            strokeWidth="7"
            strokeLinecap="round"
          />
          {/* Arrow Head */}
          <path
            d="M90 25 L 78 32 L 85 42 Z"
            fill="currentColor"
            stroke="none"
            transform="rotate(-15 90 25)"
          />
        </g>
      </svg>

      {/* ========== TEXT (Optional) ========== */}
      {variant === "full" && (
        <span
          className={cn(
            "font-bold tracking-tight",
            blendWithBackground
              ? "text-white opacity-95"
              : "text-brand-900 dark:text-brand-50",
          )}
          style={{ fontSize: "1.35rem", fontFamily: "'Inter', sans-serif" }}
        >
          JOORIN-E
        </span>
      )}
    </div>
  );
}