Vintage Leather Heritage CTA Button

"use client";

import React, { useState } from "react";
import { motion } from "framer-motion";

export type VintageLeatherTheme = "heritage" | "uipirate" | "obsidian" | "emerald" | "ruby" | "silver";
export type VintageLeatherSize = "xs" | "sm" | "md" | "lg" | "xl";

export interface VintageLeatherCTAProps {
  label?: string;
  theme?: VintageLeatherTheme;
  size?: VintageLeatherSize;
  showOrnaments?: boolean;
  onClick?: () => void;
  className?: string;
}

export function VintageLeatherCTA({
  label = "Shop ties",
  theme = "heritage",
  size = "md",
  showOrnaments = true,
  onClick,
  className = "",
}: VintageLeatherCTAProps) {
  const [isHovered, setIsHovered] = useState(false);
  const [isPressed, setIsPressed] = useState(false);

  const themeConfig = {
    heritage: {
      bg: "bg-gradient-to-b from-[#B4986C] via-[#94774B] to-[#715428]",
      border: "border-[#C9B086]/60",
      text: "text-[#3D260D]",
      shadow: "shadow-[0_8px_16px_rgba(113,84,40,0.3),inset_0_2px_0_rgba(255,255,255,0.4)]",
    },
    uipirate: {
      bg: "bg-gradient-to-b from-[#FF5B04] via-[#D94500] to-[#A33000]",
      border: "border-orange-400/60",
      text: "text-white",
      shadow: "shadow-[0_8px_16px_rgba(255,91,4,0.35),inset_0_2px_0_rgba(255,255,255,0.4)]",
    },
    obsidian: {
      bg: "bg-gradient-to-b from-[#2A2D35] via-[#1A1C22] to-[#0E1014]",
      border: "border-white/20",
      text: "text-[#E6C687]",
      shadow: "shadow-[0_8px_16px_rgba(0,0,0,0.6),inset_0_2px_0_rgba(255,255,255,0.2)]",
    },
  }[theme as "heritage" | "uipirate" | "obsidian"] || {
    bg: "bg-gradient-to-b from-[#B4986C] via-[#94774B] to-[#715428]",
    border: "border-[#C9B086]/60",
    text: "text-[#3D260D]",
    shadow: "shadow-[0_8px_16px_rgba(113,84,40,0.3),inset_0_2px_0_rgba(255,255,255,0.4)]",
  };

  return (
    <motion.button
      type="button"
      onClick={onClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        setIsPressed(false);
      }}
      onMouseDown={() => setIsPressed(true)}
      onMouseUp={() => setIsPressed(false)}
      animate={{
        y: isPressed ? 2 : isHovered ? -3 : 0,
        scale: isPressed ? 0.98 : 1,
      }}
      transition={{ type: "spring", stiffness: 450, damping: 25 }}
      className={`relative px-8 py-3.5 rounded-[18px] ${themeConfig.bg} ${themeConfig.border} border ${themeConfig.shadow} ${themeConfig.text} font-serif font-bold text-sm tracking-wide cursor-pointer focus:outline-none select-none ${className}`}
    >
      <span className="relative z-10 uppercase tracking-widest">{label}</span>
    </motion.button>
  );
}