"use client"
import { useGlobalContext } from '@/app/context/globalContext';
import { Skeleton } from '@/components/ui/skeleton';
import React from 'react'
import { WiHumidity } from "react-icons/wi";

const Humidity = () => {
    const {forecast} = useGlobalContext();
    if(!forecast || !forecast?.main || !forecast?.main?.humidity){
        return <Skeleton className='h-[12rem] w-full'/>
    };
    const {humidity} = forecast?.main;
    const humidityData = (humidity: number) => {
        if(humidity < 25)
            return "Poor low humidity levels";
        if(humidity >= 25 &&  humidity < 30)
            return "Fair";
        if(humidity >= 30 &&  humidity < 60)
            return "Maintain your helthy levels";
        if(humidity >= 60 &&  humidity < 70)
            return "Fair";
        if(humidity >= 70 )
            return "Poor high humidity levels";
        return "Humidaty data is not availiable at this moment"
    };


  return (
    <div className='flex flex-col justify-center gap-5 dark:bg-darkGgray shadow-sm dark:shadow-none sm-2:col-span-2  px-4 h-[12rem] border rounded-lg'>
        <div>
            <h2 className='flex items-center gap-2'><WiHumidity /> Humidity</h2>
            <p className='pt-4 text-2xl'>{humidity}%</p>
        </div>
        <p className='text-sm'>{humidityData(humidity)}</p>
    </div>
  )
}

export default Humidity