import type { ReactNode } from "react";
import type { LucideIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

export function LexicalRichTextToolbarButton({
  active = false,
  children,
  disabled,
  icon: Icon,
  label,
  onClick,
  pressed = active,
}: {
  active?: boolean;
  children?: ReactNode;
  disabled: boolean;
  icon?: LucideIcon;
  label: string;
  onClick: () => void;
  pressed?: boolean;
}) {
  return (
    <Button
      type="button"
      size="sm"
      variant={active ? "secondary" : "outline"}
      className={Icon ? "size-8 p-0" : "px-2.5"}
      aria-label={label}
      aria-pressed={pressed}
      title={label}
      disabled={disabled}
      onMouseDown={(event) => event.preventDefault()}
      onClick={onClick}
    >
      {Icon ? <Icon aria-hidden="true" /> : children}
      {Icon && <span className="sr-only">{label}</span>}
    </Button>
  );
}