// src/components/ui/NumberIcons.tsx
import React from "react";

interface NumberIconProps extends React.SVGProps<SVGSVGElement> {
  /** Tamanho em pixels. Escala mantendo o viewBox 80x80 */
  size?: number | string;
  /** Classe opcional para sobreposição de estilos */
  className?: string;
}

const baseProps = {
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 80 80",
};

/**
 * Primitive SVG elements compartilhados.
 * Depende da classe pai 'group' para engatilhar as micro-interações.
 */
const GraphicShell = () => (
  <>
    {/* Base Background */}
    <rect width="80" height="80" rx="8" className="fill-[#0A0A0A]" />

    {/* Borda reativa ao hover */}
    <rect
      x="1"
      y="1"
      width="78"
      height="78"
      rx="7"
      className="stroke-white/5 transition-colors duration-400 ease-[var(--ease-out)] group-hover:stroke-white/15"
      strokeWidth="1"
    />

    {/* Grid de background sutil (Cyberpunk/Tech feel) */}
    <g className="stroke-white/[0.03]" strokeWidth="1">
      <path d="M0 20H80M0 60H80M20 0V80M60 0V80" />
    </g>

    {/* Brand Slash (Acento) com Motion */}
    <polygon
      points="58,66 62,66 70,50 66,50"
      className="fill-[#E8FF00] transition-transform duration-400 ease-[var(--ease-out)] origin-bottom-right group-hover:-translate-y-1 group-hover:scale-110"
    />
  </>
);

export const NumberOne = ({
  size = 80,
  className = "",
  ...props
}: NumberIconProps) => (
  <svg
    width={size}
    height={size}
    className={`group ${className}`}
    role="img"
    aria-label="Passo 1"
    {...baseProps}
    {...props}
  >
    <GraphicShell />
    <text
      x="40"
      y="54"
      fontFamily="Syne, sans-serif"
      fontSize="40"
      fontWeight="800"
      textAnchor="middle"
      className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
    >
      1
    </text>
  </svg>
);

export const NumberTwo = ({
  size = 80,
  className = "",
  ...props
}: NumberIconProps) => (
  <svg
    width={size}
    height={size}
    className={`group ${className}`}
    role="img"
    aria-label="Passo 2"
    {...baseProps}
    {...props}
  >
    <GraphicShell />
    <text
      x="40"
      y="54"
      fontFamily="Syne, sans-serif"
      fontSize="40"
      fontWeight="800"
      textAnchor="middle"
      className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
    >
      2
    </text>
  </svg>
);

export const NumberThree = ({
  size = 80,
  className = "",
  ...props
}: NumberIconProps) => (
  <svg
    width={size}
    height={size}
    className={`group ${className}`}
    role="img"
    aria-label="Passo 3"
    {...baseProps}
    {...props}
  >
    <GraphicShell />
    <text
      x="40"
      y="54"
      fontFamily="Syne, sans-serif"
      fontSize="40"
      fontWeight="800"
      textAnchor="middle"
      className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
    >
      3
    </text>
  </svg>
);

export const NumberFour = ({
  size = 80,
  className = "",
  ...props
}: NumberIconProps) => (
  <svg
    width={size}
    height={size}
    className={`group ${className}`}
    role="img"
    aria-label="Passo 4"
    {...baseProps}
    {...props}
  >
    <GraphicShell />
    <text
      x="40"
      y="54"
      fontFamily="Syne, sans-serif"
      fontSize="40"
      fontWeight="800"
      textAnchor="middle"
      className="fill-white transition-transform duration-400 ease-[var(--ease-out)] group-hover:-translate-y-0.5"
    >
      4
    </text>
  </svg>
);