import { cn } from "@turbostarter/ui";

interface WhyRatingLogoProps {
  className?: string;
  iconClassName?: string;
  showWordmark?: boolean;
}

export function WhyRatingLogo({
  className,
  iconClassName,
  showWordmark = true,
}: WhyRatingLogoProps) {
  return (
    <div className={cn("flex items-center gap-2", className)}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 120 120"
        className={cn("h-8 w-8", iconClassName)}
      >
        <defs>
          <clipPath id="whyrating-clip">
            <circle cx="60" cy="62" r="21" />
          </clipPath>
        </defs>
        <polygon
          points="60,15 71.5,42 101,46 79.5,66 85,95 60,82 35,95 40.5,66 19,46 48.5,42"
          fill="#FBBC05"
          stroke="#FBBC05"
          strokeWidth="6"
          strokeLinejoin="round"
        />
        <g>
          <line
            x1="83"
            y1="81"
            x2="95"
            y2="91"
            stroke="#1E293B"
            strokeWidth="9"
            strokeLinecap="round"
          />
          <circle cx="60" cy="62" r="27" fill="#1E293B" />
          <circle cx="60" cy="62" r="21" fill="#FEF3C7" />
          <g clipPath="url(#whyrating-clip)">
            <rect
              x="42"
              y="58"
              width="11"
              height="35"
              rx="1.5"
              ry="1.5"
              fill="#86EFAC"
            />
            <rect
              x="55"
              y="51"
              width="11"
              height="42"
              rx="1.5"
              ry="1.5"
              fill="#22C55E"
            />
            <rect
              x="68"
              y="44"
              width="11"
              height="49"
              rx="1.5"
              ry="1.5"
              fill="#15803D"
            />
          </g>
          <rect
            x="68"
            y="44"
            width="11"
            height="18"
            rx="1.5"
            ry="1.5"
            fill="#15803D"
          />
        </g>
      </svg>
      {showWordmark && (
        <span className="font-wordmark font-bold text-foreground text-xl">
          whyrating.com
        </span>
      )}
    </div>
  );
}
