"use client";

import { motion } from "motion/react";
import { Link } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import type { ComponentProps } from "react";

type Href = ComponentProps<typeof Link>["href"];

const hoverBase = {
  scale: 1.04,
  y: -2,
  transition: { duration: 0.22, ease: "easeOut" },
} as const;

const tap = { scale: 0.97, y: 0 } as const;

type SiteButtonProps = {
  href: Href;
  variant?: "primary" | "outline";
  className?: string;
  children: React.ReactNode;
};

export function SiteButton({
  href,
  variant = "primary",
  className,
  children,
}: SiteButtonProps) {
  const isPrimary = variant === "primary";

  return (
    <Link href={href}>
      <motion.div
        whileHover={{
          ...hoverBase,
          boxShadow: isPrimary
            ? "0 8px 24px -4px rgba(30,124,115,0.38)"
            : "0 4px 16px -4px rgba(30,124,115,0.18)",
        }}
        whileTap={tap}
        className={cn(
          "flex h-12 items-center gap-2 rounded-full px-6 text-sm font-bold",
          isPrimary
            ? "bg-primary-700 text-white"
            : "border border-primary-700 text-primary-700",
          className,
        )}
      >
        {children}
      </motion.div>
    </Link>
  );
}