"use client"
import { useGlobalContext } from '@/app/context/globalContext'
import { Skeleton } from '@/components/ui/skeleton';
import React from 'react'
import { LuWind } from "react-icons/lu";
import { LiaCompass } from "react-icons/lia";

const Wind = () => {
    const {forecast} = useGlobalContext();
    const windSpeed = forecast?.wind?.speed * 2.2369;
    const windDirection = forecast?.wind?.deg;
    if(!windSpeed || !windDirection){
        return <Skeleton className='h-[12rem] w-full col-span-2 md:col-span-full'/>
    }

  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'>
        <h2 className='flex items-center gap-1 '><LuWind/> Wind</h2>
        <div className='flex items-center text-center gap-2 justify-center'>
            <p className='text-7xl'><LiaCompass/></p>
            <p className='text-4xl'>{Math.round(windSpeed)}</p>
            <div className='flex flex-col justify-start text-start'>
                <p className='text-sm'>Wind</p>
                <p className='text-xs'>MPH</p>
            </div>
            
        </div>
       
    </div>
  )
}

export default Wind