Retro Arcade Button

'use client';

import type { ElementType, HTMLAttributes, ReactNode } from 'react';
import './RetroArcadeButton.css';

/**
 * RetroArcadeButton — An 8-bit style arcade button with chunky borders and pixelated interactions.
 */
export interface RetroArcadeButtonProps extends HTMLAttributes<HTMLElement> {
  href?: string;
  target?: string;
  rel?: string;
  type?: 'button' | 'submit' | 'reset';
  variant?: 'yellow' | 'red' | 'blue' | 'green';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  children?: ReactNode;
}

export function RetroArcadeButton({
  href,
  type = 'button',
  variant = 'yellow',
  size = 'md',
  disabled = false,
  className,
  children,
  ...rest
}: RetroArcadeButtonProps) {
  const Tag: ElementType = href ? 'a' : 'button';
  return (
    <Tag
      {...rest}
      href={href}
      type={href ? undefined : type}
      disabled={href ? undefined : disabled}
      aria-disabled={href && disabled ? true : undefined}
      className={['retro-arcade-btn', `retro-arcade-btn--${variant}`, `retro-arcade-btn--${size}`, className].filter(Boolean).join(' ')}
    >
      <span className="retro-arcade-btn__inner">{children}</span>
    </Tag>
  );
}

export default RetroArcadeButton;

/* RetroArcadeButton — ported from astro-component-kit (buttons/RetroArcadeButton.astro) */

.retro-arcade-btn {
  --pixel-size: 4px;
  --main-color: #facc15;
  --shadow-color: #a16207;
  
  position: relative;
  display: inline-flex;
  padding: 0;
  background: #000;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 
    var(--pixel-size) 0 #000, 
    calc(var(--pixel-size) * -1) 0 #000, 
    0 var(--pixel-size) #000, 
    0 calc(var(--pixel-size) * -1) #000;
  transition: transform 0.1s;
  user-select: none;
  margin: var(--pixel-size);
  white-space: nowrap;
}

.retro-arcade-btn__inner {
  display: block;
  padding: 0.6rem 1.4rem;
  background: var(--main-color);
  color: #000;
  font-family: 'Courier New', monospace;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 
    inset calc(var(--pixel-size) * -1) calc(var(--pixel-size) * -1) var(--shadow-color);
  transition: all 0.1s;
}

/* Interaction */
.retro-arcade-btn:hover:not(:disabled) .retro-arcade-btn__inner {
  filter: brightness(110%);
}

.retro-arcade-btn:active:not(:disabled) {
  transform: translate(calc(var(--pixel-size) / 2), calc(var(--pixel-size) / 2));
}

.retro-arcade-btn:active:not(:disabled) .retro-arcade-btn__inner {
  box-shadow: 
    inset var(--pixel-size) var(--pixel-size) var(--shadow-color);
}

.retro-arcade-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* Variants */
.retro-arcade-btn--yellow { --main-color: #facc15; --shadow-color: #a16207; }
.retro-arcade-btn--red { --main-color: #ef4444; --shadow-color: #991b1b; }
.retro-arcade-btn--blue { --main-color: #3b82f6; --shadow-color: #1e3a8a; }
.retro-arcade-btn--green { --main-color: #22c55e; --shadow-color: #14532d; }

/* Sizes */
.retro-arcade-btn--sm { --pixel-size: 2px; }
.retro-arcade-btn--sm .retro-arcade-btn__inner { padding: 0.4rem 0.8rem; font-size: 0.75rem; }

.retro-arcade-btn--md { --pixel-size: 4px; }
.retro-arcade-btn--md .retro-arcade-btn__inner { padding: 0.7rem 1.4rem; font-size: 0.9rem; }

.retro-arcade-btn--lg { --pixel-size: 6px; }
.retro-arcade-btn--lg .retro-arcade-btn__inner { padding: 1rem 2rem; font-size: 1.1rem; }