import React from 'react'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion"
import { PiCalendarCheck } from 'react-icons/pi'
import { GoClock } from 'react-icons/go'
import { AiOutlineLink } from "react-icons/ai";
import Link from 'next/link'
  

const ScheduleList = ({meetingList}) => {
  return (
    <div>
        {meetingList && meetingList.map((meeting, index) => (
            <Accordion key={index} type="single" collapsible>
                <AccordionItem value="item-1">
                    <AccordionTrigger>{meeting?.formatedDate}</AccordionTrigger>
                    <AccordionContent>
                        <div>
                            <div className='mt-2 flex flex-col gap-2'>
                                <p className='flex gap-1 items-center'><PiCalendarCheck/>{meeting.formatedDate}</p>
                                <p className='flex gap-1 items-center'><GoClock/>{meeting?.timeDuration} minutes 
                                    <span className="text-sm text-gray-500">({meeting.selectedTime})</span>
                                </p>
                                <div className='flex justify-between items-center'>
                                    <p className='flex gap-1 items-center'>
                                        <AiOutlineLink/>
                                        <Link href={meeting?.urlMeeting?meeting?.urlMeeting:'#'} className="text-gray-500 underline text-sm">{meeting?.urlMeeting}</Link>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </AccordionContent>
                </AccordionItem>
            </Accordion>
        ))}
    </div>
  )
}

export default ScheduleList