"use client";

interface LogoProps {
  variant?: "mark" | "wordmark" | "icon";
  size?: "sm" | "md" | "lg" | "xl";
  theme?: "dark" | "light" | "accent";
  className?: string;
  showTagline?: boolean;
}

const sizeMap = {
  sm: { width: 32, height: 32 },
  md: { width: 48, height: 48 },
  lg: { width: 64, height: 64 },
  xl: { width: 120, height: 80 },
};

export function Logo({
  variant = "mark",
  size = "md",
  theme = "dark",
  className = "",
  showTagline = false,
}: Readonly<LogoProps>) {
  const dimensions = sizeMap[size];

  const colors = {
    dark: {
      primary: "#FFFFFF",
      slash: "#E8FF00",
    },
    light: {
      primary: "#0A0A0A",
      slash: "#0A0A0A",
    },
    accent: {
      primary: "#0A0A0A",
      slash: "rgba(0,0,0,.3)",
    },
  };

  const c = colors[theme];

  if (variant === "icon") {
    return (
      <svg
        width={dimensions.width}
        height={dimensions.height}
        viewBox="0 0 64 64"
        fill="none"
        className={className}
        role="img"
        aria-label="Evandro icon logo"
      >
        <title>Evandro icon logo</title>
        <rect width="64" height="64" rx="14" fill={c.primary} />
        <rect
          x="10"
          y="10"
          width="7"
          height="44"
          fill={theme === "dark" ? "#0A0A0A" : c.primary}
        />
        <rect
          x="17"
          y="10"
          width="18"
          height="7"
          fill={theme === "dark" ? "#0A0A0A" : c.primary}
        />
        <rect
          x="17"
          y="28.5"
          width="14"
          height="7"
          fill={theme === "dark" ? "#0A0A0A" : c.primary}
        />
        <rect
          x="17"
          y="47"
          width="18"
          height="7"
          fill={theme === "dark" ? "#0A0A0A" : c.primary}
        />
        <polygon points="37,38 41,38 50,26 46,26" fill={c.slash} />
        <circle
          cx="52"
          cy="47"
          r="5"
          fill={theme === "dark" ? "#0A0A0A" : c.primary}
        />
      </svg>
    );
  }

  if (variant === "wordmark") {
    return (
      <div className={`flex items-center gap-3 ${className}`}>
        <svg
          width={dimensions.width}
          height={dimensions.height}
          viewBox="0 0 48 32"
          fill="none"
          role="img"
          aria-label="Evandro wordmark logo"
        >
          <title>Evandro wordmark logo</title>
          <rect x="2" y="2" width="7" height="28" fill={c.primary} />
          <rect x="9" y="2" width="20" height="7" fill={c.primary} />
          <rect x="9" y="12.5" width="16" height="7" fill={c.primary} />
          <rect x="9" y="23" width="20" height="7" fill={c.primary} />
          <polygon points="30,22 34,22 42,10 38,10" fill={c.slash} />
          <circle cx="44" cy="25" r="4" fill={c.primary} />
        </svg>
        <div>
          <div
            className="font-display text-lg font-extrabold tracking-tight"
            style={{ color: c.primary }}
          >
            evandro<span style={{ color: c.slash }}>.</span>dev
            <span style={{ color: c.slash }}>.</span>br
          </div>
          {showTagline && (
            <div
              className="mt-1 text-[9px] tracking-widest"
              style={{
                color:
                  theme === "dark"
                    ? "rgba(255,255,255,.25)"
                    : "rgba(10,10,10,.4)",
              }}
            >
              DESENVOLVIMENTO DE SOFTWARE
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <svg
      width={dimensions.width}
      height={dimensions.height}
      viewBox="0 0 120 80"
      fill="none"
      className={className}
      role="img"
      aria-label="Evandro mark logo"
    >
      <title>Evandro mark logo</title>
      <rect x="10" y="8" width="9" height="64" fill={c.primary} />
      <rect x="19" y="8" width="28" height="9" fill={c.primary} />
      <rect x="19" y="35.5" width="22" height="9" fill={c.primary} />
      <rect x="19" y="63" width="28" height="9" fill={c.primary} />
      <polygon points="50,55 57,55 74,25 67,25" fill={c.slash} />
      <circle cx="80" cy="63" r="7" fill={c.primary} />
    </svg>
  );
}