"use client";

interface ConversationItemProps {
  id: string;
  title: string;
  isActive: boolean;
  onClick: () => void;
  onDelete: () => void;
}

export function ConversationItem({
  title,
  isActive,
  onClick,
  onDelete,
}: ConversationItemProps) {
  return (
    <button
      onClick={onClick}
      className={`group w-full flex items-center gap-2 px-2 py-[5px] text-left text-r-sm rounded transition-colors ${
        isActive
          ? "bg-rp-hover/60 text-rp-text font-medium"
          : "text-rp-muted hover:bg-rp-hover/30 hover:text-rp-text"
      }`}
    >
      <span className="truncate flex-1">{title}</span>
      <span
        role="button"
        tabIndex={0}
        onClick={(e) => {
          e.stopPropagation();
          onDelete();
        }}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.stopPropagation();
            onDelete();
          }
        }}
        className={`shrink-0 text-r-2xs px-1 rounded transition-colors ${
          isActive
            ? "text-rp-faint hover:text-rp-muted hover:bg-rp-surface"
            : "hidden group-hover:block text-rp-faint hover:text-rp-muted hover:bg-rp-surface"
        }`}
        title="More options"
      >
        &#x2026;
      </span>
    </button>
  );
}