import React, { useState } from 'react';

interface IconButtonTypes {
  ariaLabel?: string | undefined;
  callback?: (() => void) | undefined;
  icon?: string | undefined;
  title?: string | undefined;
  tooltip?: null | undefined;
  ariaRole?: string | undefined;
  theme?: string;
}

const IconButton = ({
  ariaLabel = '',
  callback = () => {},
  icon = 'fa-thin fa-heart',
  title = '',
  tooltip = null,
  ariaRole,
  theme = 'border',
}: IconButtonTypes) => {
  const [showTooltip, showTooltipSetter] = useState(false);

  return (
    <button
      role={ariaRole}
      type="button"
      aria-label={ariaLabel}
      onMouseEnter={() => showTooltipSetter(true)}
      onMouseLeave={() => showTooltipSetter(false)}
      onClick={callback}
      className={`IconButton relative inline-block w-12 h-12 text-center align-middle items-center justify-center text-xl rounded-lg bg-white hover:bg-gray-100 ${theme}`}
    >
      <i
        className={`${icon} ${title !== null ? 'mt-2' : ''}`}
        aria-hidden="true"
      />
      {title !== '' && (
        <span className="text-[10px] block -mt-2.5">{title}</span>
      )}
      {tooltip !== null && showTooltip === true && (
        <span className="absolute left-14 text-xs bg-black text-white border p-2 border-l-0 rounded-md rounded-l-none px-4 whitespace-nowrap">
          {tooltip}
        </span>
      )}
    </button>
  );
};

export default IconButton;