import DaysList from '@/app/_utils/DaysList'
import React from 'react'
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'


const Availability = () => {
  return (
    <div className='px-5'>
        <p className='font-semibold text-xl'>Availability</p><hr className='my-5'/>
        <div>
            <p className='my-5 font-semibold'>Available days & time</p>
            <div className='flex flex-col'>
                {DaysList.map((item, index) => (
                    <div key={index} className='grid grid-cols-3 border-b mb-2'>
                        <p className='flex items-center gap-2 text-sm sm:text-base'><Checkbox />{item.day}</p>
                        <div className='flex gap-2 mb-2'>
                            <div>
                                <p className='mb-1 text-xs font-semibold text-gray-700'>Start time</p>
                                <p className='flex gap-1 sm:gap-2 items-center'><Input type='time'/> - </p>
                            </div>
                            <div>
                                <p className='mb-1 text-xs font-semibold text-gray-700'>End time</p>
                                <Input type="time"/>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
        <Button className="mt-5">Save</Button>
    </div>
  )
}

export default Availability