import Link from "next/link";
import { FC } from "react";

type Theme = keyof typeof colors;

type Props = {
  children: React.ReactNode;
  className?: string;
  theme?: Theme;
  size?: "small" | "medium" | "large" | "icon";
  onClick?: () => void;
  href?: string;
  gradient?: {
    from: string;
    to: string;
  };
};

export const Button: FC<Props> = ({
  children,
  className = "",
  onClick,
  href,
  size = "medium",
  theme = "primary",
  gradient,
}) => {
  const Component = (href ? Link : "button") as any;

  const buttonColor = gradient ?? colors[theme];

  if (theme === "slate" && !className.includes("shadow-")) {
    className += " shadow-cyan-500/20 hover:shadow-cyan-500/40";
  }

  return (
    <Component
      className={`flex items-center justify-center gap-2 cursor-pointer text-white rounded-xl font-semibold shadow-2xl transition-all duration-300 
        bg-gradient-to-br ${buttonColor?.from} ${buttonColor?.to} cursor-pointer ${sizes[size]} ${className}`}
      onClick={onClick}
      {...(href && { href })}
    >
      {children}
    </Component>
  );
};

const sizes = {
  small: "px-4 py-2 text-sm",
  medium: "px-8 py-4 text-lg",
  large: "px-12 py-6 text-xl",
  icon: "w-12 h-12 !rounded-full border border-white/20 hover:scale-105 [&>svg]:w-5 [&>svg]:h-5 shadow-lg ",
};

const colors = {
  primary: {
    from: "from-purple-600 hover:from-purple-500",
    to: "to-emerald-600 hover:to-emerald-500",
  },
  secondary: {
    from: "from-purple-600 hover:from-purple-500",
    to: "to-cyan-600 hover:to-cyan-500",
  },
  glass: {
    from: "from-white/15 border border-white/20",
    to: "to-white/5 hover:to-white/10",
  },
  rosePink: {
    from: "from-rose-600/90 hover:from-rose-500/90",
    to: "to-pink-600/90 hover:to-pink-500/90",
  },
  emeraldTeal: {
    from: "from-emerald-600/90 hover:from-emerald-500/90",
    to: "to-teal-600/90 hover:to-teal-500/90",
  },
  purplePink: {
    from: "from-purple-600/90 hover:from-purple-500/90",
    to: "to-pink-600/90 hover:to-pink-500/90",
  },
  pinkEmerald: {
    from: "from-pink-600/90 hover:from-pink-500/90",
    to: "to-emerald-600/90 hover:to-emerald-500/90",
  },
  tealEmerald: {
    from: "from-teal-600/90 hover:from-teal-500/90",
    to: "to-emerald-600/90 hover:to-emerald-500/90",
  },
  cyanPurple: {
    from: "from-cyan-600/90 hover:from-cyan-500/90",
    to: "to-purple-600/90 hover:to-purple-500/90",
  },
  slate: {
    from: "from-slate-800/95",
    to: "to-slate-900/95",
  },
};