import Link from "next/link";
import type { ComponentPropsWithoutRef, ReactNode } from "react";

type Variant = "primary" | "ivory" | "outline" | "ghost";
type Size = "md" | "lg";

const base =
  "inline-flex items-center justify-center gap-2 rounded-pill font-medium transition-[background-color,color,box-shadow,transform] duration-[var(--duration-base)] ease-[var(--ease-out)] focus-visible:outline-3 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-60 motion-safe:hover:-translate-y-px";

const variants: Record<Variant, string> = {
  primary: "bg-slate-500 text-white shadow-sm hover:bg-slate-700 focus-visible:outline-navy-900",
  ivory: "bg-ivory-200 text-navy-900 hover:bg-ivory-100 focus-visible:outline-white",
  outline:
    "border border-navy-800/50 bg-transparent text-navy-900 hover:border-navy-900 hover:bg-white/60",
  ghost: "text-navy-900 hover:bg-navy-900/5",
};

const sizes: Record<Size, string> = {
  md: "px-5 py-2 text-sm",
  lg: "px-6 py-3 text-[0.95rem]",
};

export function Arrow({ className = "h-4 w-4" }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M2.5 8h11M9 3.5 13.5 8 9 12.5" />
    </svg>
  );
}

type CommonProps = {
  variant?: Variant;
  size?: Size;
  arrow?: boolean;
  className?: string;
  children: ReactNode;
};

type LinkProps = CommonProps & { href: string } & Omit<
    ComponentPropsWithoutRef<typeof Link>,
    "href" | "children" | "className"
  >;
type ButtonProps = CommonProps & { href?: undefined } & Omit<
    ComponentPropsWithoutRef<"button">,
    "children" | "className"
  >;

export function Button(props: LinkProps | ButtonProps) {
  const {
    variant = "primary",
    size = "md",
    arrow = true,
    className = "",
    children,
    ...rest
  } = props;
  const cls = `${base} ${variants[variant]} ${sizes[size]} ${className}`;
  const content = (
    <>
      {children}
      {arrow ? <Arrow /> : null}
    </>
  );
  if (rest.href !== undefined) {
    const { href, ...linkRest } = rest as Omit<LinkProps, keyof CommonProps>;
    return (
      <Link href={href} className={cls} {...linkRest}>
        {content}
      </Link>
    );
  }
  const { href: _unused, ...buttonRest } = rest as Omit<ButtonProps, keyof CommonProps>;
  void _unused;
  return (
    <button type="button" className={cls} {...buttonRest}>
      {content}
    </button>
  );
}