import React from 'react'
import { IoSearchOutline } from "react-icons/io5";
import Card from '../components/Card';

const Home = () => {
  const item = {
    photo: "https://images.unsplash.com/photo-1714547808442-e4199a7f8e09?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    author: "Jtp",
    prompt: "This is prompt",
  }


  return (
    <div className='h-full overflow-y-scroll p-5 flex flex-col gap-5 items-center'>
      <p className='flex px-2 text-2xl text-[#F6F1E9] text-center'>Explore our popular images using AI generator</p>
      {/*=== Search ===*/}
      <div className='w-[100%] sm:w-[50%] flex border rounded-sm overflow-hidden'>
        <input type="text" placeholder='What do you want to see?' className='w-[95%] border-none p-2 outline-none bg-black'/>
        <button className='w-[5%] flex justify-center items-center duration-300 font-semibold'><IoSearchOutline/></button>
      </div>
      <div className='max-w-[1500px] w-full flex justify-center py-5'>
        <div className='grid gap-2 grid-cols-4 max-[999px]:grid-cols-3 max-[640px]:grid-cols-2'>
          <Card item={item}/>
          <Card item={item}/>
          <Card item={item}/>
          <Card item={item}/>
          <Card item={item}/>
          <Card item={item}/>
        </div>
      </div>
    </div>
  )
}

export default Home