import { useRouter } from "next/navigation";
import { useState, ChangeEvent } from "react";

interface iDefault {
    defaultValue: string | null
}


export const SearchInput = ({ defaultValue }: iDefault) => {
    // initiate the router from next/navigation

    const router = useRouter()

    // We need to grab the current search parameters and use it as default value for the search input

    const [inputValue, setValue] = useState(defaultValue)

    const handleChange = (event: ChangeEvent<HTMLInputElement>) =>{

        const inputValue = event.target.value;

        setValue(inputValue);

    }



    // If the user clicks enter on the keyboard, the input value should be submitted for search 

    // We are now routing the search results to another page but still on the same page


    const handleSearch = () => {

        if (inputValue) return router.push(`/?q=${inputValue}`);

        if (!inputValue) return router.push("/")

    }


    const handleKeyPress = (event: { key: any; }) => {

        if (event.key === "Enter") return handleSearch()

    }



    return (

        <div className="search__input border-[2px] border-solid border-slate-500 flex flex-row items-center gap-5 p-1 rounded-[15px]">

            <label htmlFor="inputId">searchIcon</label>


            <input type="text"

                id="inputId"

                placeholder="Enter your keywords"

                value={inputValue ?? ""} onChange={handleChange}

                onKeyDown={handleKeyPress}

                className="bg-[transparent] outline-none border-none w-full py-3 pl-2 pr-3" />


        </div>

    )

}

import Image from 'next/image'


//Import the profile interface from data.js


import { iProfile } from "../services/data";



export const ProfileCard = (props: iProfile) => {


    const { name, email, username, role, photo } = props;


    return (

        <div className="profile__card rounded-[15px] border border-solid">

            <Image src={photo} alt={username} className="h-[200px]" height={1000} width={400} />


            <div className=" bg-slate-300 p-3">

                <h2 className="">Name: {name}</h2>

                <p>Role: {role}</p>

                <p>Email: {email}</p>

                <p>follow @{username}</p>


            </div>

        </div>

    )

}

const Home = () => {
   return (<>this is Homepage Component</> )
}

export default Home

// import the Homepage component


 const App = () => {

  return <Homepage />

 }


export default App

// change this component to client component


'use client'


// import the data

// import the searchBar

// import the profile UI

import { useState, useEffect } from "react"

import { ProfileCard } from "@/components/ProfileCard"

import { SearchInput } from "@/components/SearchInput"

import { data, iProfile } from "@/services/data"


const Home = () => {


  // initialize useState for the data

  const [profileData, setProfileData] = useState<iProfile[]>([])



  useEffect(() => {

    // will be updated soon

     setProfileData(data)

    },[])


  // get total users

  const totalUser = profileData.length;

  return (

    <section className="h-[100vh] w-screen px-[2rem] md:px-[6rem] mt-[100px]">

      <p className="mb-10 ">Showing {totalUser} {totalUser > 1 ? "Users" : "User"}</p>

      <SearchInput defaultValue={searchQuery} />

      {/* // Conditionally render the profile cards */}

      <div className="mt-8">

        {totalUser === 0 ? <p>No result returned</p> : (

          // return the profile cards here

          <div className="grid grid-cols-1 md:grid-cols-3 items-center gap-5">

            {profileData.map(({ username, role, name, photo, email }: iProfile) => {

              return (

                <div key={username}>

                  <ProfileCard name={name} role={role} photo={photo} email={email} username={username} />

                </div>

              )

            })}


          </div>


          // End of profile data UI

        )}


      </div>

    </section>

  )


}

export default Home

// import the useSearchParams hook

import {useSearchParams} from 'next/navigation'

// And replace your useEffect code with this:

 const searchParams = useSearchParams()

  // Now get the query 

  const searchQuery = searchParams && searchParams.get("q"); // we use `q` to set the query to the browser, it could be anything

  useEffect(() => {

    const handleSearch = () => {

      // Filter the data based on search query

      const findUser = data.filter((user) => {

        if (searchQuery) {

          return (


 user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||

            user.role.toLowerCase().includes(searchQuery.toLowerCase()) ||

            user.username.toLowerCase().includes(searchQuery.toLowerCase()) ||

            user.email.toLowerCase().includes(searchQuery.toLowerCase())

          );

        } else {

          // If no search query, return the original data

          return true;

        }

      });


      // Update profileData based on search results

      setProfileData(findUser);

    };


    // Call handleSearch when searchQuery changes

    handleSearch();

  }, [searchQuery]); // Only rerun the effect if searchQuery changes