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

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

export type CheckboxListItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
  selected: boolean;
  label: ReactNode;
  left?: ReactNode;
};

export function CheckboxListItem({
  selected,
  label,
  left,
  className,
  type = "button",
  disabled,
  ...props
}: CheckboxListItemProps) {
  return (
    <button
      type={type}
      disabled={disabled}
      className={cn(
        "flex w-full items-center gap-2 rounded-md px-1.5 py-1.5 text-left transition-colors",
        selected ? "bg-primary/10" : "hover:bg-muted",
        disabled && "cursor-not-allowed opacity-50",
        className,
      )}
      {...props}
    >
      <CheckboxIndicator checked={selected} />
      {left}
      <span className="truncate text-[13px] text-foreground">{label}</span>
    </button>
  );
}