import React, { useContext } from 'react';
import { AuthContext } from '../providers/AuthContext';
import GridLayout from '../layouts/GridLayout';
import { CalendarIcon, MapPinIcon, } from "@heroicons/react/24/outline";


const FindOpportunities = () => {
    const { user } = useContext(AuthContext);

    const fakePosting = {
        id: '69420',
        name: 'Team Rocket',
        location: 'Annapolis, MD',
        title: 'Need Help Battling Mega Bidoof!',
        description: "Mega Bidoof is crazy hard to battle. He's so big and strong and mega, and named Bidoof.",
        date_posted: '04/23/2024',
        date_scheduled: '05/01/2024',
        time_scheduled: 'Flexible'
    }

    return (
        <>
            {!user ? (
                <h1>tuna tees here</h1>
            ) : (
                <GridLayout>
                    <>
                    <div className="flex w-full flex-col">
                        <div className="max-w-2xl mt-3 pb-4 text-2xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white"> Search for Opportunities </div>
                            <ul className="">
                                <div className="grid grid-cols-[128px,1fr,128px] h-32 border border-gray-100 rounded-md shadow-md">
                                    <div className="max-md:hidden col-span-1 p-4 bg-gray-100 m-3 rounded"></div>
                                    <div className="col-span-1 pt-4">
                                        <div className="text-lg font-semibold"> {fakePosting.title} </div>
                                        <div className="text-xs line-clamp- text-gray-500">{fakePosting.description} </div>
                                        <div className="text-xs grid grid-cols-3 place-content-between">
                                            <div className="inline-flex "><CalendarIcon className="h-4 w-4"/>  {fakePosting.date_posted} </div>
                                            <div className="inline-flex "> <MapPinIcon className="h-4 w-4"/>  {fakePosting.location} </div>
                                            <div className="inline-flex "> <MapPinIcon className="h-4 w-4"/>  {fakePosting.location} </div>
                                        </div>
                                    </div>
                                    <button className="col-span-1 bg-indigo-500 rounded my-12 mx-4 items-center justify-center ">Apply</button>


                                </div>
                            </ul>



                        </div>
                    </>
                </GridLayout>
            )}
        </>
    );
};

export default FindOpportunities;