Animated Slide-Up Button

"use client";

import React from "react";

export interface AnimatedSlideButtonProps {
  primaryText: string;
  hoverText?: string;
  variant?: "primary" | "secondary";
  onClick?: () => void;
  className?: string;
}

export function AnimatedSlideButton({
  primaryText,
  hoverText = "See More →",
  variant = "primary",
  onClick,
  className = "",
}: AnimatedSlideButtonProps) {
  const variantStyles =
    variant === "primary"
      ? "bg-black text-white hover:bg-neutral-800"
      : "bg-white text-black border-2 border-black hover:bg-neutral-100";

  return (
    <button
      type="button"
      onClick={onClick}
      className={`group relative px-8 py-4 rounded-[20px] font-semibold text-sm transition-all duration-300 overflow-hidden cursor-pointer select-none ${variantStyles} ${className}`}
    >
      <div className="flex flex-col items-center justify-center max-h-[22px] overflow-hidden">
        <span className="transition-transform duration-300 ease-in-out transform group-hover:translate-y-[40px] translate-y-2.5">
          {primaryText}
        </span>
        <span className="transition-transform duration-300 ease-in-out transform translate-y-[40px] group-hover:-translate-y-2.5 font-bold">
          {hoverText}
        </span>
      </div>
    </button>
  );
}

export default AnimatedSlideButton;