import React from 'react';
import { LucideIcon } from 'lucide-react';
import { Button } from './Button';
import { Icon } from './Icon';

interface IconButtonProps {
  icon: LucideIcon;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  title?: string;
  disabled?: boolean;
  color?: string;
  className?: string;
  backgroundColor?: string;
}

export function IconButton({
  icon,
  onClick,
  variant = 'secondary',
  size = 'md',
  title,
  disabled,
  color,
  className = '',
  backgroundColor,
}: IconButtonProps) {
  const sizeMap = {
    sm: { btn: 'w-8 h-8 p-0', icon: 4 },
    md: { btn: 'w-10 h-10 p-0', icon: 5 },
    lg: { btn: 'w-12 h-12 p-0', icon: 6 },
  };

  return (
    <Button
      variant={variant}
      onClick={onClick}
      title={title}
      disabled={disabled}
      className={`${sizeMap[size].btn} rounded-full flex items-center justify-center min-h-0 ${className}`}
      backgroundColor={backgroundColor}
    >
      <Icon icon={icon} size={sizeMap[size].icon} color={color} />
    </Button>
  );
}