Shine Button

import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

type Common = { children?: ReactNode; size?: "md" | "lg"; className?: string };
export type ShineButtonProps = Common &
  (({ href?: undefined } & ButtonHTMLAttributes<HTMLButtonElement>) | ({ href: string } & AnchorHTMLAttributes<HTMLAnchorElement>));

/** Gradient pill with a glossy highlight and a light sweep that crosses it on hover/focus (CSS only). Renders a link when href is set. */
export function ShineButton({ children = "Start free", size = "md", className, ...rest }: ShineButtonProps) {
  const cls = cn(
    "glass-shine da-focus da-transition group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent font-semibold text-da-primary-fg shadow-da-md hover:-translate-y-0.5 hover:shadow-da-lg active:translate-y-0",
    size === "lg" ? "h-13 px-7 text-base" : "h-11 px-5 text-sm",
    className,
  );
  const inner = (
    <>
      <span aria-hidden className="absolute inset-x-3 top-0 h-1/2 rounded-b-full bg-gradient-to-b from-white/35 to-transparent" />
      <span
        aria-hidden
        className="glass-shine-sweep absolute inset-y-0 -left-1/2 w-1/3 skew-x-[-20deg] bg-gradient-to-r from-transparent via-white/55 to-transparent"
      />
      <span className="relative inline-flex items-center gap-2">{children}</span>
      <style href="glass-shine" precedence="default">{`
        .glass-shine-sweep { translate: -100% 0; transition: translate 0s }
        .glass-shine:hover .glass-shine-sweep, .glass-shine:focus-visible .glass-shine-sweep { translate: 450% 0; transition: translate .8s cubic-bezier(.2,.8,.2,1) }
        @media (prefers-reduced-motion: reduce) { .glass-shine-sweep { display: none } }
      `}</style>
    </>
  );
  if ("href" in rest && rest.href !== undefined) {
    return (
      <a {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)} className={cls}>
        {inner}
      </a>
    );
  }
  return (
    <button type="button" {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)} className={cls}>
      {inner}
    </button>
  );
}

export default ShineButton;