import Link from "next/link";
import { Button } from "@/components/ui/button";
import React from "react";

interface IconButtonProps {
  label: string;
  icon?: React.ReactNode;
  iconShow?: boolean;
  onClick?: () => void;
  href?: string; // optional
  size?: "sm" | "lg" | "icon" | "default";
  className?: string;
  type?: "button" | "reset" | "submit";
  disabled?: boolean;
}

const IconButton: React.FC<IconButtonProps> = ({
  label,
  iconShow = true,
  onClick,
  href,
  size = "default",
  className = "",
  type = "button",
  disabled = false,
}) => {
  const classes = `border border-[#E50914] bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E]
                   text-[14px] text-white cursor-pointer p-4  flex items-center justify-center gap-2 rounded-[7px] transition-all duration-300 ease-in-out hover:from-[#c72a40] hover:via-[#c72a40] hover:to-[#e03d1a] ${className}`;

  if (href) {
    return (
      <Link href={href} className={classes}>
        {label}
        {iconShow && (
          <svg
            width="12"
            height="13"
            viewBox="0 0 12 13"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M11.0556 5.36608L2.3056 0.19811C2.06863 0.0613909 1.80658 0.0112607 1.51947 0.047719C1.23236 0.0841773 0.997662 0.202667 0.815371 0.403188C0.605735 0.621938 0.500917 0.895375 0.500917 1.2235V11.5731C0.500917 11.8739 0.596621 12.1314 0.788027 12.3456C0.979433 12.5598 1.21641 12.6919 1.49896 12.7421C1.78152 12.7922 2.0504 12.7443 2.3056 12.5985L11.0556 7.43053C11.3017 7.27558 11.4726 7.06595 11.5683 6.80163C11.664 6.5373 11.664 6.2707 11.5683 6.00182C11.4726 5.73294 11.3017 5.52103 11.0556 5.36608Z"
              fill="white"
            />
          </svg>
        )}
      </Link>
    );
  }

  return (
    <Button
      size={size}
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={classes}
    >
      {label}
      {iconShow && (
        <svg
          width="12"
          height="13"
          viewBox="0 0 12 13"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M11.0556 5.36608L2.3056 0.19811C2.06863 0.0613909 1.80658 0.0112607 1.51947 0.047719C1.23236 0.0841773 0.997662 0.202667 0.815371 0.403188C0.605735 0.621938 0.500917 0.895375 0.500917 1.2235V11.5731C0.500917 11.8739 0.596621 12.1314 0.788027 12.3456C0.979433 12.5598 1.21641 12.6919 1.49896 12.7421C1.78152 12.7922 2.0504 12.7443 2.3056 12.5985L11.0556 7.43053C11.3017 7.27558 11.4726 7.06595 11.5683 6.80163C11.664 6.5373 11.664 6.2707 11.5683 6.00182C11.4726 5.73294 11.3017 5.52103 11.0556 5.36608Z"
            fill="white"
          />
        </svg>
      )}
    </Button>
  );
};

export default IconButton;