import { Command } from "cmdk";
import React from "react";

import { CheckIcon } from "@buzzwaretech/propel/icons";
// buzzwareTech imports
import { cn } from "@buzzwaretech/utils";
// local imports
import { KeySequenceBadge, ShortcutBadge } from "./command-item-shortcut-badge";

type Props = {
  icon?: React.ComponentType<{ className?: string }>;
  iconNode?: React.ReactNode;
  isDisabled?: boolean;
  isSelected?: boolean;
  keySequence?: string;
  label: string | React.ReactNode;
  onSelect: () => void;
  shortcut?: string;
  value?: string;
};

export function PowerKModalCommandItem(props: Props) {
  const {
    icon: Icon,
    iconNode,
    isDisabled,
    isSelected,
    keySequence,
    label,
    onSelect,
    shortcut,
    value,
  } = props;

  return (
    <Command.Item
      value={value}
      onSelect={onSelect}
      className="focus:outline-none"
      disabled={isDisabled}
    >
      <div
        className={cn("flex items-center gap-2 text-secondary", {
          "opacity-70": isDisabled,
        })}
      >
        {Icon && <Icon className="size-3.5 shrink-0" />}
        {iconNode}
        {label}
      </div>
      <div className="flex shrink-0 items-center gap-2">
        {isSelected && <CheckIcon className="size-3 shrink-0 text-secondary" />}
        {keySequence && <KeySequenceBadge sequence={keySequence} />}
        {shortcut && <ShortcutBadge shortcut={shortcut} />}
      </div>
    </Command.Item>
  );
}