import { useState } from 'react';

import Button, {
  Props as ButtonProps,
  ButtonShape,
  ButtonVariant,
} from '../button/Button';

export default function PanelButton({
  Icon,
  HoverIcon,
  enabled = true,
  ...props
}: {
  Icon: React.FC<React.SVGProps<SVGSVGElement>>;
  HoverIcon: React.FC<React.SVGProps<SVGSVGElement>>;
  enabled?: boolean;
} & ButtonProps) {
  const [isHovered, setIsHovered] = useState(false);
  return (
    <Button
      disabled={!enabled}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      variant={ButtonVariant.Tertiary}
      icon={
        isHovered && enabled ? (
          <HoverIcon className='h-4 w-4' />
        ) : (
          <Icon className='h-4 w-4 scale-125' />
        )
      }
      shape={ButtonShape.Pill}
      className={`h-[40px] p-2.5 text-[12px] ${props.className ?? ''}`}
      {...props}
    />
  );
}