import { useState } from 'react';
import { MoreVertical, Trash2 } from 'lucide-react';

type SessionContextMenuProps = {
  sessionId: number;
  onDelete: (id: number) => void;
};

export function SessionContextMenu({ sessionId, onDelete }: SessionContextMenuProps) {
  const [isOpen, setIsOpen] = useState(false);

  function handleButtonClick(e: React.MouseEvent) {
    e.stopPropagation();
    setIsOpen(!isOpen);
  }

  return (
    <div className="relative" onClick={(e) => e.stopPropagation()}>
      <button
        onClick={handleButtonClick}
        className="p-1 rounded-md hover:bg-duck-dark/10 dark:hover:bg-foreground/10 transition-colors opacity-0 group-hover:opacity-100"
      >
        <MoreVertical className="h-4 w-4" />
      </button>

      {isOpen && (
        <>
          <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
          <div className="absolute right-0 top-full mt-1 z-50 min-w-[120px] bg-background border border-duck-dark/10 dark:border-foreground/10 rounded-md shadow-lg overflow-hidden">
            <button
              onClick={() => {
                onDelete(sessionId);
                setIsOpen(false);
              }}
              className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-red-500/10 text-red-600 dark:text-red-400 transition-colors text-left"
            >
              <Trash2 className="h-4 w-4" />
              Delete
            </button>
          </div>
        </>
      )}
    </div>
  );
}
