// 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>
);