'use client';

/**
 * `<SlashToken>` — the styled chip a resolved slash verb renders as
 * once the machine reaches `command` state. Intended for `blockStart`
 * or `inlineStart` composer slots so the editor reads `[/clear] args`
 * — the verb is a token, the rest is free-text argument.
 */
import { cn } from '@djangocfg/ui-core/lib';

import type { SlashCommand } from './types';

export interface SlashTokenProps {
  command: SlashCommand;
  /** Called to clear the verb (drop it back to plain text). */
  onClear?: () => void;
  /** Optional close-icon node. Default: a small `×` glyph. */
  clearIcon?: React.ReactNode;
  className?: string;
}

export function SlashToken({
  command,
  onClear,
  clearIcon,
  className,
}: SlashTokenProps) {
  return (
    <span
      className={cn(
        'inline-flex h-6 items-center gap-1 rounded-md px-1.5',
        'bg-primary/10 text-primary',
        className,
      )}
    >
      {command.icon ? (
        <span className="flex h-3 w-3 shrink-0 items-center justify-center">
          {command.icon}
        </span>
      ) : null}
      <span className="text-[12px] font-semibold">{command.token}</span>
      {onClear ? (
        <button
          type="button"
          onMouseDown={(e) => {
            e.preventDefault();
            onClear();
          }}
          aria-label={`Clear ${command.token}`}
          className="ml-0.5 rounded-sm text-primary/60 transition-colors hover:text-primary"
        >
          {clearIcon ?? <span aria-hidden>×</span>}
        </button>
      ) : null}
    </span>
  );
}