"use client"
import { useGlobalContext } from '@/app/context/globalContext'
import { air_QualityIndex } from '@/app/utils/Misc';
import { Progress } from '@/components/ui/progress';
import { Skeleton } from '@/components/ui/skeleton';
import React from 'react'
import { FaThermometerEmpty } from "react-icons/fa";

const AirPollution = () => {
    const {airPollution} = useGlobalContext();
    if(!airPollution || !airPollution.list || !airPollution.list[0] || !airPollution.list[0].main){
        return <Skeleton className='h-[12rem] w-full col-span-2 md:col-span-full'/>
    }
    const airQualityIndex = airPollution.list[0].main.aqi * 10;
    //console.log(airQualityIndex)
    //filter api
    const filterAQI = air_QualityIndex.find((item) => {
        return item.rating === airQualityIndex;
    })
    console.log(airQualityIndex)


  return (
    <div className='flex flex-col gap-8 dark:bg-darkGgray shadow-sm dark:shadow-none pt-6 px-4 h-[12rem] border rounded-lg col-span-full sm-2:col-span-2 md:col-span-2 xl:col-span-2'>
        <h2 className='flex items-center gap-1 '><FaThermometerEmpty/> Air Pollution</h2>
        <Progress value={airQualityIndex} max={100} className='air-progress'/>
        <p>Air quality is {filterAQI?.desc}</p>
    </div>
  )
}

export default AirPollution