"use client"
import { useGlobalContext } from '@/app/context/globalContext'
import { unixToTime } from '@/app/utils/Misc';
import { Skeleton } from '@/components/ui/skeleton';
import React from 'react'
import { GiSunrise } from "react-icons/gi";
import { GiSunset } from "react-icons/gi";

const Sunset = () => {
    const {forecast} = useGlobalContext();
    if(!forecast || !forecast.sys || !forecast?.sys?.sunset){
        return <Skeleton className='h-[12rem] w-full'/>
    }
    const times = forecast?.sys.sunset;
    const timezone = forecast?.timezone;
    const timeSunset = unixToTime(times, timezone)
    const timeSunrise = unixToTime(forecast?.sys?.sunrise, timezone)


  return (
    <div className='flex flex-col gap-5 justify-center dark:bg-darkGgray shadow-sm dark:shadow-none sm-2:col-span-2 px-5 h-[12rem] border rounded-lg'>
        <div className=''>
           <h2 className='flex items-center gap-1 '><GiSunrise/>Sunrise</h2> 
           <p className='pt-2'>{timeSunrise} am</p>
        </div>
        <div className=''>
           <h2 className='flex items-center gap-1 '><GiSunset/> Sunset</h2> 
           <p className='pt-2'>{timeSunset} pm</p>
        </div>
    </div>
  )
}

export default Sunset