"use client";

import axios from "axios";
import type { Result } from "./person";
import PersonItem from "./PersonItem";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";

const url = "https://randomuser.me/api/?results=12";

const PeoplePage = () => {
  const [users, setUsers] = useState<Result[]>([]);

  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    axios
      .get(url)
      .then((response) => {
        console.log(response);
        setUsers(response.data.results);
        setIsLoading(false);
      })
      .catch((error: any) => {
        if (error.isAxiosError) {
          console.log(error.response);
          toast.error(`Error occurred while fetching..`);
        } else {
          console.log(error);
        }
      });
  }, []);

  if (isLoading) {
    return (
      <>
        <span className="loading loading-ball loading-xs"></span>
        <span className="loading loading-ball loading-sm"></span>
        <span className="loading loading-ball loading-md"></span>
        <span className="loading loading-ball loading-lg"></span>
        <span className="loading loading-ball loading-xl"></span>
      </>
    );
  }

  return (
    <section>
      <h2 className="font-bold text-center text-amber-900 tracking-tight mt-2 text-3xl">
        People Page
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
        {users?.map((user) => {
          return (
            <PersonItem {...user} key={user.login.uuid} remove={() => {}} />
          );
        })}
      </div>
    </section>
  );
};

export default PeoplePage;