'use client';

import clsx from 'clsx';
import React from 'react'
import { motion } from 'framer-motion';
import { Refresh } from 'iconsax-react';

type Props = {
  pending?: boolean | undefined
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

function Button({ children, className, disabled, pending, ...rest }: Props) {
  return (
    <div>
      <button
        disabled={disabled}
        className={clsx(
          className,
          disabled ? 'bg-disabled text-disabled-text' : 'bg-primary text-white dark:text-black hover:bg-primary/90 active:brightness-110',
          pending && 'bg-transparent! text-transparent! cursor-auto!',
          'relative transition-all duration-200 cursor-pointer w-full rounded-normal p-3 font-normal text-sm overflow-clip'
        )}
        {...rest}
      >
        <motion.div
          className='absolute left-0 top-0 h-full w-full bg-border'
          initial={{ y: '100%' }}
          animate={!pending ? { y: '100%' } : { y: 0 }}
        >
          <motion.div
            animate={pending && { rotateZ: [0, 360] }}
            transition={{ duration: 1.2, repeat: Infinity, ease: 'linear' }}
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            className='-translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 absolute'>
            <Refresh className='stroke-foreground' size={24} />
          </motion.div>
        </motion.div>
        {children}
      </button>
    </div>
  )
}

export default Button