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: { w: '8', h: '8', icon: 4 },
    md: { w: '10', h: '10', icon: 5 },
    lg: { w: '12', h: '12', icon: 6 },
  };

  return (
    <Button
      variant={variant}
      onClick={onClick}
      title={title}
      disabled={disabled}
      w={sizeMap[size].w}
      h={sizeMap[size].h}
      p={0}
      rounded="full"
      display="flex"
      center
      minHeight="0"
      className={className}
      backgroundColor={backgroundColor}
    >
      <Icon icon={icon} size={sizeMap[size].icon} color={color} />
    </Button>
  );
}