Glass Button

'use client';

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

/**
 * GlassButton — A premium button with glassmorphism effect, gradient border and smooth hover animations.
 *
 * @param href - Optional. If provided, renders an <a> tag instead of <button>.
 * @param type - Optional. The HTML button type. Default 'button'.
 * @param variant - Optional. 'primary' | 'secondary' | 'ghost'. Default 'primary'.
 * @param size - Optional. 'sm' | 'md' | 'lg'. Default 'md'.
 * @param disabled - Optional. Whether the button is disabled. Default false.
 */
export interface GlassButtonProps extends HTMLAttributes<HTMLElement> {
  href?: string;
  target?: string;
  rel?: string;
  type?: 'button' | 'submit' | 'reset';
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  children?: ReactNode;
}

export function GlassButton({
  href,
  type = 'button',
  variant = 'primary',
  size = 'md',
  disabled = false,
  className,
  children,
  ...rest
}: GlassButtonProps) {
  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={['glass-btn', `glass-btn--${variant}`, `glass-btn--${size}`, className].filter(Boolean).join(' ')}
    >
      <span className="glass-btn__shimmer" />
      <span className="glass-btn__content">{children}</span>
    </Tag>
  );
}

export default GlassButton;

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

.glass-btn {
  --btn-bg: rgba(255, 255, 255, 0.05);
  --btn-border: rgba(255, 255, 255, 0.1);
  --btn-text: var(--c-text-1, #d4d4d4);
  --btn-glow: rgba(184, 134, 11, 0);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-sans, inherit);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-md, 12px);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  user-select: none;
  overflow: hidden;
  color: var(--btn-text);
}

.glass-btn__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.05),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.glass-btn:hover:not(:disabled) .glass-btn__shimmer {
  transform: translateX(100%);
}

.glass-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent, rgba(255,255,255,0.05));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.glass-btn:hover:not(:disabled)::after {
  opacity: 1;
}

.glass-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px -10px var(--btn-glow);
}

.glass-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.glass-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}

.glass-btn--primary {
  --btn-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.7), rgba(212, 160, 23, 0.7));
  --btn-text: #0a0a0a;
  --btn-glow: rgba(184, 134, 11, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
}

.glass-btn--secondary {
  --btn-bg: rgba(255, 255, 255, 0.03);
  --btn-glow: rgba(255, 255, 255, 0.1);
}

.glass-btn--ghost {
  --btn-bg: transparent;
  --btn-text: var(--c-primary-light, #d4a017);
  --btn-border: rgba(184, 134, 11, 0.25);
  --btn-glow: rgba(184, 134, 11, 0.15);
  backdrop-filter: none;
}

.glass-btn--ghost:hover:not(:disabled) {
  background: rgba(184, 134, 11, 0.08);
  border-color: rgba(184, 134, 11, 0.4);
}

.glass-btn--sm { padding: 0.45rem 1.1rem; font-size: 0.85rem; }
.glass-btn--md { padding: 0.75rem 1.6rem; font-size: 0.95rem; }
.glass-btn--lg { padding: 1.1rem 2.4rem; font-size: 1.1rem; }