"use client";
import React from "react";

export function SinglePageLogo({ width = 120, height = 28, className }: { width?: number; height?: number; className?: string }) {
  // 원본 SVG는 512x512 정사각형입니다. 주어진 width/height 중 높이를 기준으로 정사각형 로고를 맞추고,
  // 가로 폭은 전달받은 width 박스 안에서 가운데 정렬합니다.
  const squareSize = height; // 로고 자체는 정사각형
  return (
    <div className={className} style={{ position: "relative", width, height, display: "inline-flex", alignItems: "center", justifyContent: "flex-start" }} aria-label="logo">
      <svg width={squareSize} height={squareSize} viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden={false}>
        <g clipPath="url(#clip0_9739_16177)">
          <path d="M371.99 0H139.94C62.6533 0 0 62.6533 0 139.94V371.99C0 449.277 62.6533 511.93 139.94 511.93H371.99C449.277 511.93 511.93 449.277 511.93 371.99V139.94C511.93 62.6533 449.277 0 371.99 0Z" fill="#5C5C5C"/>
          <path d="M141.801 414.32L221.991 512H372.051C437.291 512 492.111 467.35 507.611 406.94C510.471 395.07 512.001 382.54 512.001 369.49V263.21L402.381 136.92L413.091 258.53L397.761 314.72L332.371 336.18L265.551 339.25H187.281L171.951 344.36L154.581 366.84L141.801 414.32Z" fill="#333333"/>
          <path d="M247.849 74.16C294.009 71.07 344.459 85.39 381.369 116.03C455.159 177.27 451.759 279.02 379.519 339.81C365.789 351.36 351.499 358.08 337.619 367.97C313.749 384.98 335.579 425.85 319.879 442.83C313.839 449.36 304.699 450.21 298.049 444.33C282.919 430.94 298.229 402.44 283.699 388.06C272.859 377.33 254.969 383.45 250.369 398.22C247.149 408.57 251.369 429.43 251.769 441.22C252.209 454.15 254.029 480.74 238.219 483.24C223.489 485.56 217.279 476.88 216.879 461.71C216.329 441.16 221.509 415.25 219.329 395.63C217.049 375.09 180.939 361.76 175.979 381.71C172.449 395.94 180.599 424.11 157.669 423.6C128.939 422.96 139.289 374.75 137.799 354.07C136.349 333.98 128.279 331.17 117.829 318.14C60.8193 247.04 79.0293 156.62 149.889 107.9C178.259 88.4 214.349 76.4 247.839 74.16H247.849Z" fill="white"/>
          <path d="M339.518 242.97H189.838C173.858 242.97 160.898 231.58 160.898 217.54C160.898 203.5 173.848 192.11 189.838 192.11H339.518C355.498 192.11 368.458 203.5 368.458 217.54C368.458 231.58 355.508 242.97 339.518 242.97Z" fill="#333333"/>
        </g>
        <defs>
          <clipPath id="clip0_9739_16177">
            <rect width="512" height="512" fill="white"/>
          </clipPath>
        </defs>
      </svg>
    </div>
  );
}

export default SinglePageLogo;


