import { motion } from 'framer-motion';
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';

type Variant = 'primary' | 'ghost';

type Common = {
  children: ReactNode;
  variant?: Variant;
  className?: string;
};

type AnchorProps = Common &
  AnchorHTMLAttributes<HTMLAnchorElement> & {
    as: 'a';
    href: string;
  };

type ButtonProps = Common &
  ButtonHTMLAttributes<HTMLButtonElement> & {
    as?: 'button';
  };

export type NeonButtonProps = AnchorProps | ButtonProps;

const base =
  'inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 focus-visible:ring-offset-2 focus-visible:ring-offset-void';

const variants: Record<Variant, string> = {
  primary:
    'bg-gradient-to-r from-cyan-500 to-sky-500 text-slate-950 shadow-glow hover:brightness-110 active:scale-[0.98]',
  ghost:
    'border border-white/15 bg-white/5 text-white hover:border-cyan-400/40 hover:bg-white/10 active:scale-[0.98]',
};

export function NeonButton(props: NeonButtonProps) {
  const { children, variant = 'primary', className = '' } = props;
  const cls = `${base} ${variants[variant]} ${className}`;

  if (props.as === 'a') {
    const { href, children: c, variant: _v, className: _c, as: _a, ...aRest } = props;
    return (
      <motion.a
        href={href}
        whileHover={{ scale: 1.02 }}
        whileTap={{ scale: 0.98 }}
        className={cls}
        {...aRest}
      >
        {c}
      </motion.a>
    );
  }

  const { children: c, variant: _v, className: _c, as: _a, ...btnRest } = props as ButtonProps;
  return (
    <motion.button
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      className={cls}
      {...btnRest}
    >
      {c}
    </motion.button>
  );
}
