Neumorphic Button

'use client';

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

/**
 * NeumorphicButton — A premium Soft UI button with beveled surface gradients and hue-tinted shadows.
 *
 * @param baseColor - Optional. Surface color. Default 'var(--c-bg-2, #111827)'.
 * @param variant - Optional. 'convex' | 'concave'. Default 'convex'.
 */
export interface NeumorphicButtonProps extends HTMLAttributes<HTMLElement> {
  href?: string;
  target?: string;
  rel?: string;
  type?: 'button' | 'submit' | 'reset';
  baseColor?: string;
  variant?: 'convex' | 'concave';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  children?: ReactNode;
}

export function NeumorphicButton({
  href,
  type = 'button',
  baseColor = 'var(--c-bg-2, #111827)',
  variant = 'convex',
  size = 'md',
  disabled = false,
  className,
  style,
  children,
  ...rest
}: NeumorphicButtonProps) {
  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={['neu-btn', `neu-btn--${size}`, `neu-btn--${variant}`, className].filter(Boolean).join(' ')}
      style={{ '--base-color': baseColor, ...style } as CSSProperties}
    >
      <span className="neu-btn__surface">{children}</span>
    </Tag>
  );
}

export default NeumorphicButton;

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

.neu-btn {
  /* Design Tokens */
  --distance: 8px;
  --blur: 16px;
  --shadow-opacity: 0.4;
  --highlight-opacity: 0.05;
  
  /* Derived Colors */
  --shadow-dark: rgba(0, 0, 0, var(--shadow-opacity));
  --shadow-light: rgba(255, 255, 255, var(--highlight-opacity));
  --surface-light: color-mix(in srgb, var(--base-color), white 4%);
  --surface-dark: color-mix(in srgb, var(--base-color), black 4%);
  
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--font-sans, inherit);
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--c-text-1, #f1f5f9);
  border-radius: var(--r-xl, 20px);
  user-select: none;
  white-space: nowrap;
  outline: none;
}

.neu-btn__surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: inherit;
  border-radius: inherit;
  background: linear-gradient(145deg, var(--surface-light), var(--surface-dark));
  z-index: 2;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Rim Light highlight */
.neu-btn__surface::before {
  content: '';
  position: absolute;
  inset: 0.5px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 50%, rgba(0,0,0,0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Convex Variant (Default) */
.neu-btn--convex {
  box-shadow: 
    var(--distance) var(--distance) var(--blur) var(--shadow-dark),
    calc(var(--distance) * -0.6) calc(var(--distance) * -0.6) var(--blur) var(--shadow-light);
}

/* Concave Variant */
.neu-btn--concave .neu-btn__surface {
  background: var(--base-color);
  box-shadow: 
    inset var(--distance) var(--distance) var(--blur) var(--shadow-dark),
    inset calc(var(--distance) * -0.5) calc(var(--distance) * -0.5) var(--blur) var(--shadow-light);
}

/* Hover States */
.neu-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.neu-btn--convex:hover:not(:disabled) {
  box-shadow: 
    calc(var(--distance) * 1.4) calc(var(--distance) * 1.4) calc(var(--blur) * 1.4) var(--shadow-dark),
    calc(var(--distance) * -0.8) calc(var(--distance) * -0.8) calc(var(--blur) * 1.4) var(--shadow-light);
}

/* Active/Pressed States */
.neu-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

.neu-btn--convex:active:not(:disabled) .neu-btn__surface {
  background: var(--base-color);
  box-shadow: 
    inset calc(var(--distance) * 0.5) calc(var(--distance) * 0.5) calc(var(--blur) * 0.5) var(--shadow-dark),
    inset calc(var(--distance) * -0.3) calc(var(--distance) * -0.3) calc(var(--blur) * 0.5) var(--shadow-light);
}

.neu-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
  box-shadow: none;
}

/* Sizes */
.neu-btn--sm { padding: 0.5rem 1.4rem; font-size: 0.85rem; --distance: 4px; --blur: 8px; }
.neu-btn--md { padding: 0.85rem 2.4rem; font-size: 1rem; }
.neu-btn--lg { padding: 1.2rem 3.5rem; font-size: 1.2rem; --distance: 12px; --blur: 24px; }

/* Color scheme adjustments */
@media (prefers-color-scheme: light) {
  .neu-btn {
    --shadow-opacity: 0.15;
    --highlight-opacity: 0.8;
    --shadow-dark: rgba(163, 177, 198, var(--shadow-opacity));
    --shadow-light: rgba(255, 255, 255, var(--highlight-opacity));
    color: #374151;
  }
}