import React from "react";

import { Checkbox, CheckboxProps } from "../checkbox/Checkbox";
import { MenuItem, MenuItemProps } from "./MenuItem";

export type MenuCheckboxItemProps = Omit<
  MenuItemProps,
  "leftIcon" | "className"
> &
  Pick<CheckboxProps, "checked" | "onChange"> & {
    children: string;
    ESCAPE_className?: string;
  };

export const MenuCheckboxItem = ({
  children,
  checked,
  onChange,
  ESCAPE_className,
}: MenuCheckboxItemProps) => (
  <MenuItem ESCAPE_className={ESCAPE_className}>
    <div className="flex h-20 items-center">
      <Checkbox
        ESCAPE_className="-ml-2 flex-1 h-20 items-center"
        checked={checked}
        onChange={onChange}
        label={<span className="ml-2">{children}</span>}
      />
    </div>
  </MenuItem>
);
