interface LogoProps {
  markSize?: number;
  showText?: boolean;
  className?: string;
}

export default function Logo({ markSize = 36, showText = true, className = "" }: LogoProps) {
  return (
    <span className={`flex items-center gap-2.5 ${className}`}>
      {/* Inline SVG mark — D letter uses var(--fg1) so it flips with light/dark theme */}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 200 200"
        fill="none"
        width={markSize}
        height={markSize}
        style={{ flexShrink: 0 }}
      >
        {/* P letter — always green */}
        <g fill="#22c55e">
          <rect x="28" y="28" width="26" height="148" rx="3" />
          <rect x="28" y="28" width="90" height="24" rx="3" />
          <rect x="28" y="100" width="82" height="22" rx="3" />
          <path d="M108 28 Q148 28 148 64 Q148 100 110 122 L82 122 L82 100 L108 100 Q124 100 124 64 Q124 28 108 28 Z" />
        </g>
        {/* D letter — var(--fg1): white in dark mode, near-black in light mode */}
        <g fill="var(--fg1)">
          <rect x="86" y="52" width="24" height="120" rx="3" />
          <rect x="86" y="52" width="56" height="22" rx="3" />
          <rect x="86" y="150" width="56" height="22" rx="3" />
          <path d="M136 52 Q184 52 184 112 Q184 172 136 172 L136 150 Q162 150 162 112 Q162 74 136 74 Z" />
        </g>
      </svg>

      {showText && (
        <span className="font-extrabold text-lg leading-none tracking-tight" style={{ color: "var(--fg1)" }}>
          Paid<span style={{ color: "#22c55e" }}>2</span>Marketing
        </span>
      )}
    </span>
  );
}