// buzzwareTech imports
import type { IMarking } from "@buzzwaretech/editor";
import { cn } from "@buzzwaretech/utils";

export type THeadingComponentProps = {
  marking: IMarking;
  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
};

const COMMON_CLASSNAME =
  "flex-shrink-0 w-full py-1 text-left font-medium text-tertiary hover:text-accent-primary truncate transition-colors";

export function OutlineHeading1({ marking, onClick }: THeadingComponentProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(COMMON_CLASSNAME, "pl-1 text-13")}
    >
      {marking.text}
    </button>
  );
}

export function OutlineHeading2({ marking, onClick }: THeadingComponentProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(COMMON_CLASSNAME, "pl-2 text-11")}
    >
      {marking.text}
    </button>
  );
}

export function OutlineHeading3({ marking, onClick }: THeadingComponentProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(COMMON_CLASSNAME, "pl-4 text-11")}
    >
      {marking.text}
    </button>
  );
}