"use client";

import { Search, File, Settings, User } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";

export function CommandPalette() {
  const [search, setSearch] = useState("");
  const [active, setActive] = useState(0);
  
  return (
    <div className="w-full max-w-md rounded-xl border border-border bg-[#0a0a0a] shadow-2xl overflow-hidden flex flex-col pointer-events-auto">
      <div className="flex items-center px-4 py-3 border-b border-border/50">
        <Search className="mr-3 h-4 w-4 text-muted-foreground" />
        <input 
          type="text" 
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="Type a command or search..." 
          className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground text-foreground"
          autoFocus
        />
      </div>
      <div className="p-2 space-y-1">
        <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">Suggestions</div>
        
        <div 
          onClick={() => setActive(0)}
          className={cn(
            "flex items-center px-2 py-2 rounded-md cursor-pointer transition-colors",
            active === 0 ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-[#151515] hover:text-foreground"
          )}
        >
          <File className="mr-2 h-4 w-4" />
          <span className="text-sm">Create new file</span>
        </div>
        
        <div 
          onClick={() => setActive(1)}
          className={cn(
            "flex items-center px-2 py-2 rounded-md cursor-pointer transition-colors",
            active === 1 ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-[#151515] hover:text-foreground"
          )}
        >
          <User className="mr-2 h-4 w-4" />
          <span className="text-sm">Search users</span>
        </div>
        
        <div 
          onClick={() => setActive(2)}
          className={cn(
            "flex items-center px-2 py-2 rounded-md cursor-pointer transition-colors",
            active === 2 ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-[#151515] hover:text-foreground"
          )}
        >
          <Settings className="mr-2 h-4 w-4" />
          <span className="text-sm">Settings</span>
        </div>
      </div>
    </div>
  );
}