'use client';
import React, { ButtonHTMLAttributes, ReactNode } from 'react';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children?: ReactNode;
  loading?: boolean;
  disabled?: boolean;
  endIcon?: ReactNode;
  size?: 'small' | 'medium' | 'large';
  variant?: 'solid' | 'text';
}

const Button: React.FC<ButtonProps> = ({
  children,
  loading = false,
  disabled = false,
  endIcon,
  size = 'medium',
  variant = 'solid',
  className,
  ...props
}) => {

 
  return (
    <button
      className={`group relative bg-[#FA003F] rounded-[0.5625rem] h-12 p-px flex ${className || ''}`}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? (
        <svg
          className="animate-spin -ml-1 mr-3 h-5 w-5 text-primary"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
        >
          <circle
            className="opacity-25"
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            strokeWidth="4"
          ></circle>
          <path
            className="opacity-75"
            fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l2-2.647z"
          ></path>
        </svg>
      ) : null}
     
       <div className={`rounded-lg bg-white text-[#222222] flex items-center justify-center px-3 `}>
        {children}
       </div>
     
      {endIcon && !loading ? (
        <span className=" flex items-center justify-center p-3">
          {endIcon}
        </span>
      ) : null}
   
    </button>
  );
};

export default Button;
