Ghost Outline Button

'use client';

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

/**
 * GhostOutlineButton — A minimalist transparent button with gradient outlines and animated borders.
 *
 * @param primaryColor - Optional. Gradient start. Default '#6366f1'.
 * @param secondaryColor - Optional. Gradient end. Default '#c084fc'.
 */
export interface GhostOutlineButtonProps extends HTMLAttributes<HTMLElement> {
  href?: string;
  target?: string;
  rel?: string;
  type?: 'button' | 'submit' | 'reset';
  primaryColor?: string;
  secondaryColor?: string;
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  children?: ReactNode;
}

export function GhostOutlineButton({
  href,
  type = 'button',
  primaryColor = '#6366f1',
  secondaryColor = '#c084fc',
  size = 'md',
  disabled = false,
  className,
  style,
  children,
  ...rest
}: GhostOutlineButtonProps) {
  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={['ghost-grad-btn', `ghost-grad-btn--${size}`, className].filter(Boolean).join(' ')}
      style={{ '--primary-color': primaryColor, '--secondary-color': secondaryColor, ...style } as CSSProperties}
    >
      <span className="ghost-grad-btn__text">{children}</span>
    </Tag>
  );
}

export default GhostOutlineButton;

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

.ghost-grad-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  color: #fff;
  padding: 2px;
  border: none;
  border-radius: var(--r-md, 12px);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 700;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--font-sans, inherit);
}

.ghost-grad-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  z-index: 1;
  transition: opacity 0.3s ease;
}

.ghost-grad-btn:hover:not(:disabled)::before {
  opacity: 0.8;
}

.ghost-grad-btn__text {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #0f172a;
  padding: 0.7rem 1.8rem;
  border-radius: calc(var(--r-md, 12px) - 2px);
  z-index: 2;
  transition: background 0.3s ease, color 0.3s ease;
}

.ghost-grad-btn:hover:not(:disabled) .ghost-grad-btn__text {
  background: transparent;
  color: #fff;
}

.ghost-grad-btn:hover:not(:disabled) {
  box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--primary-color), transparent 50%);
  transform: translateY(-1px);
}

.ghost-grad-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.ghost-grad-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* Sizes */
.ghost-grad-btn--sm { font-size: 0.85rem; }
.ghost-grad-btn--sm .ghost-grad-btn__text { padding: 0.45rem 1.2rem; }

.ghost-grad-btn--md { font-size: 1rem; }
.ghost-grad-btn--md .ghost-grad-btn__text { padding: 0.75rem 1.8rem; }

.ghost-grad-btn--lg { font-size: 1.15rem; }
.ghost-grad-btn--lg .ghost-grad-btn__text { padding: 1.1rem 2.5rem; }