import type { ButtonHTMLAttributes, ReactNode } from "react";

import { CheckboxIndicator } from "@/components/ui/checkbox-indicator";
import { cn } from "@/lib/utils";

export type CheckboxMenuItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
  checked: boolean;
  label: ReactNode;
  left?: ReactNode;
  right?: ReactNode;
  labelClassName?: string;
};

export function CheckboxMenuItem({
  checked,
  label,
  left,
  right,
  labelClassName,
  className,
  type = "button",
  disabled,
  ...props
}: CheckboxMenuItemProps) {
  return (
    <button
      type={type}
      disabled={disabled}
      className={cn(
        "flex w-full cursor-pointer items-center gap-2.5 rounded px-2.5 py-1.5 transition-colors hover:bg-[#F9FAFB]",
        disabled && "cursor-not-allowed opacity-50",
        className,
      )}
      {...props}
    >
      <CheckboxIndicator checked={checked} size="sm" />
      {left}
      <span
        className={cn(
          "text-[12px] text-foreground",
          (left != null || right != null) && "flex-1 text-left",
          labelClassName,
        )}
      >
        {label}
      </span>
      {right}
    </button>
  );
}