import Image from "next/image";
import "./logo.css";

interface LogoProps {
  theme?: "dark" | "light";
  className?: string;
  loading?: "eager" | "lazy";
}

/*
 * O logo em duas partes sobre a caixa do wordmark-<tema>.webp (1600x330): o símbolo em SVG em linha, para os blocos
 * lima poderem se mexer (logo.css), e o texto, que é o mesmo .webp com o símbolo apagado (wordmark-text-<tema>.webp,
 * do mesmo tamanho, para passar pelo mesmo redimensionamento e dar a mesma altura de antes). As coordenadas do SVG
 * são pixels do .webp original, medidas nas bordas das formas; cor e opacidade também vêm dele.
 */
const SHAPE_FILL = { dark: "#f4f3ee", light: "#00090b" } as const;

// em ordem de encaixe, de baixo para cima
const BLOCKS = [
  { x: 130.66, y: 110.25, width: 76.47, height: 86.05 },
  { x: 204.39, y: 43.9, width: 67.72, height: 69.39 },
  { x: 287.27, y: 3.28, width: 39.58, height: 40.82 },
  { x: 312.91, y: 79.72, width: 39.39, height: 39.76 },
];

export function Logo({
  theme = "dark",
  className = "w-48",
  loading = "lazy",
}: Readonly<LogoProps>) {
  return (
    <span className={`relative block max-w-full ${className}`}>
      <svg
        aria-hidden="true"
        focusable="false"
        viewBox="0 0 360 330"
        preserveAspectRatio="none"
        className="absolute top-0 left-0 h-full w-[22.5%] overflow-visible"
      >
        <path
          fill={SHAPE_FILL[theme]}
          fillOpacity={0.933}
          d="M10.17 223.44H40.23V188.63H74.87V153.98H111.2V222.33H74.93V277.73H139.93V217.4H200.14V291.36H171.59V325.32H10.17Z"
        />
        <g fill="#ccfa00" opacity={0.98}>
          {BLOCKS.map((block) => (
            <rect key={block.x} className="logo-bloco" {...block} />
          ))}
        </g>
      </svg>
      <Image
        src={`/brand/wordmark-text-${theme}.webp`}
        alt="Evandro.dev.br"
        width={1600}
        height={330}
        sizes="240px"
        loading={loading}
        className="block h-auto w-full"
      />
    </span>
  );
}