Retro Shadow Button

'use client';

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

/**
 * RetroShadowButton — A sharp-edged neo-brutalist button with a thick solid block shadow.
 */
export interface RetroShadowButtonProps extends HTMLAttributes<HTMLElement> {
  href?: string;
  target?: string;
  rel?: string;
  type?: 'button' | 'submit' | 'reset';
  variant?: 'pink' | 'cyan' | 'yellow' | 'lime';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  children?: ReactNode;
}

export function RetroShadowButton({
  href,
  type = 'button',
  variant = 'pink',
  size = 'md',
  disabled = false,
  className,
  children,
  ...rest
}: RetroShadowButtonProps) {
  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-shadow-btn', `retro-shadow-btn--${variant}`, `retro-shadow-btn--${size}`, className].filter(Boolean).join(' ')}
    >
      {children}
    </Tag>
  );
}

export default RetroShadowButton;

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

.retro-shadow-btn {
  --btn-bg: #ff7eb3;
  --shadow-color: #000;
  --shadow-offset: 6px;
  
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
  color: #000;
  border: 3px solid #000;
  font-family: var(--font-sans, inherit);
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.1s;
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-color);
  user-select: none;
  white-space: nowrap;
}

.retro-shadow-btn:hover:not(:disabled) {
  transform: translate(calc(var(--shadow-offset) * -0.2), calc(var(--shadow-offset) * -0.2));
  box-shadow: calc(var(--shadow-offset) * 1.2) calc(var(--shadow-offset) * 1.2) 0 var(--shadow-color);
}

.retro-shadow-btn:active:not(:disabled) {
  transform: translate(calc(var(--shadow-offset) * 0.5), calc(var(--shadow-offset) * 0.5));
  box-shadow: calc(var(--shadow-offset) * 0.5) calc(var(--shadow-offset) * 0.5) 0 var(--shadow-color);
}

.retro-shadow-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.5);
  box-shadow: 2px 2px 0 var(--shadow-color);
}

/* Variants (90s Palette) */
.retro-shadow-btn--pink { --btn-bg: #ff7eb3; }
.retro-shadow-btn--cyan { --btn-bg: #00f5ff; }
.retro-shadow-btn--yellow { --btn-bg: #fff01f; }
.retro-shadow-btn--lime { --btn-bg: #bfff00; }

/* Sizes */
.retro-shadow-btn--sm { padding: 0.4rem 1rem; font-size: 0.85rem; --shadow-offset: 4px; border-width: 2px; }
.retro-shadow-btn--md { padding: 0.7rem 1.6rem; font-size: 1rem; --shadow-offset: 6px; border-width: 3px; }
.retro-shadow-btn--lg { padding: 1rem 2.2rem; font-size: 1.2rem; --shadow-offset: 8px; border-width: 4px; }