"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";

export function LookupPlayer() {
  const router = useRouter();
  const [player, setPlayer] = useState("");

  /**
   * Set the player value
   *
   * @param event the input event
   */
  const setPlayerValue = (event: React.ChangeEvent<HTMLInputElement>) => {
    setPlayer(event.target.value);
  };

  /**
   * Lookup a player
   */
  const lookupPlayer = () => {
    if (!player || player.length === 0) {
      return;
    }
    router.push(`/player/${player}`);
  };

  return (
    <div className="flex gap-2 justify-center mt-2">
      <Input className="w-fit" placeholder="Player UUID / Username" value={player} onChange={setPlayerValue} />
      <Button onClick={() => lookupPlayer()}>Lookup</Button>
    </div>
  );
}