import React from 'react';
import Image from 'next/image';
import Link from 'next/link';

interface CustomButtonProps {
  label: string;
  bgColor?: string;
  hoverColor?: string;
  textColor?: string;
  onClick?: () => void;
  href?: string;
  iconSrc?: any;
  iconAlt?: string;
  iconWidth?: number;
  iconHeight?: number;
  classCustom?: string;
}

const CustomButton: React.FC<CustomButtonProps> = ({
  label,
  bgColor,
  hoverColor,
  textColor = 'text-white',
  onClick,
  href,
  iconSrc,
  iconAlt = 'icon',
  iconWidth = 20,
  iconHeight = 20,
  classCustom
}) => {
  const classNames = `bg-[${bgColor}] ${textColor} ${classCustom} p-4 rounded-[8px] text-lg mt-4 font-medium flex items-center justify-center gap-[6px] h-[56px] hover:bg-[${hoverColor}]`;

  const content = (
    <>
      <span>{label}</span>
      {iconSrc && (
        <Image
          src={iconSrc}
          alt={iconAlt}
          width={iconWidth}
          height={iconHeight}
          className="mr-2"
        />
      )}
    </>
  );

  if (href) {
    return (
      <Link href={href} className={classNames} onClick={onClick} target="_blank">
        {content}
      </Link>
    );
  }

  return (
    <button className={`${classNames}`} onClick={onClick} type='button'>
      {content}
    </button>
  );
};

export default CustomButton;