import { Person } from "../items";
import { Link } from "react-router-dom";
import { useState } from "react";
import { get_auth_status } from "./api";
import "./PersonList.css"

interface Props {
  people: Person[];
}

export const PersonList = ({ people }: Props) => {
  const [current_user, set_current_user] = useState<string>("");
  get_auth_status().then((res) => {
    if (res) {
      set_current_user(res.username);
    }
  });
  return (
    <div>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: "1rem",
        }}
      >
        <h2>People List</h2>
      </div>
      <div className="grid-container">
        {people.map((person, index) => {
          if (person.name == current_user) {
            return (
              <Link
                to={`/games#existing-games`}
                key={index}
                className="list-item"
                style={{
                  textDecoration: "none",
                  color: "inherit",
                  display: "block",
                }}
              >
                <h3>{person.name}</h3>
              </Link>
            );
          }

          return (
            <Link
              to={`/person/${person.name}`}
              key={index}
              className="list-item"
              style={{
                textDecoration: "none",
                color: "inherit",
                display: "block",
              }}
            >
              <h3>{person.name}</h3>
            </Link>
          );
        })}
      </div>
    </div>
  );
};