import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
import s from "./IconButton.module.css";

export type IconButtonSize = "sm" | "md" | "lg";

export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
{
    /** Required: 图标按钮没有可见文本，必须有 aria-label。 */
    "aria-label": string;
    size?: IconButtonSize;
    selected?: boolean;
    children: ReactNode;
}

const SIZE_CLASS: Record<IconButtonSize, string> = {
    sm: s.sm,
    md: s.md,
    lg: s.lg,
};

export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) =>
{
    const { size = "md", selected, className, children, type = "button", ...rest } = props;

    const cls = [
        s.btn,
        SIZE_CLASS[size],
        selected ? s.selected : "",
        className ?? "",
    ].filter(Boolean).join(" ");

    return (
        <button ref={ref} type={type} className={cls} {...rest}>
            {children}
        </button>
    );
});

IconButton.displayName = "IconButton";
