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

const Visibility = () => {
    const {forecast} = useGlobalContext();
    if(!forecast || !forecast?.visibility){
        return <Skeleton className='h-[12rem] w-full'/>
    }
    const {visibility} = forecast;
    
    const visibilityData = (visibility: number) => {
        const visibilityInMiles = Math.round((visibility / 1000) * 0.621);
        if(visibilityInMiles <= 1 )
            return "Thick fog"
        if(visibilityInMiles <= 2 )
            return "Haze"
        if(visibilityInMiles <= 6 )
            return "Light haze"
        if(visibilityInMiles <= 12 )
            return "Clear"
        if(visibilityInMiles <= 31 )
            return "Very Clear"
        if(visibilityInMiles > 31 )
            return "Exceptionally clear"
        return "Pure Air"
    }


  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'><MdVisibility/> Visibility</h2>
            <p className='pt-4 text-2xl'>{Math.round((visibility / 1000) * 0.621)} mi</p>
        </div>
        <p className='text-sm'>{visibilityData(visibility)}</p>
    </div>
  )
}

export default Visibility