import type { ButtonHTMLAttributes } from "react";
import { X } from "lucide-react";

import { cn } from "@/lib/utils";

export type IconCloseButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
  iconSize?: number;
  label?: string;
};

export function IconCloseButton({
  iconSize = 17,
  label = "Close",
  className,
  type = "button",
  disabled,
  "aria-label": ariaLabel,
  ...props
}: IconCloseButtonProps) {
  return (
    <button
      type={type}
      disabled={disabled}
      aria-label={ariaLabel ?? label}
      className={cn(
        "flex size-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted",
        disabled && "cursor-not-allowed opacity-50",
        className,
      )}
      {...props}
    >
      <X size={iconSize} />
    </button>
  );
}