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

const Pressure = () => {
  const {forecast} = useGlobalContext();
    if(!forecast || !forecast?.main || !forecast?.main?.pressure){
        return <Skeleton className='h-[12rem] w-full'/>
    }
    const {pressure} = forecast?.main;
    const pressureData = (pressure: number) => {
      const pressureIninHg = Math.round(pressure * 0.0295);
      if(pressureIninHg < 28 )
        return "Low"
      if(pressureIninHg >= 28 && pressureIninHg <= 30 )
        return "Normal"
      return "High"
    }

  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'><LiaCloudscale/> Pressure</h2>
          <p className='pt-4 text-2xl'>{Math.round(pressure * 0.0295)} inHg</p>
        </div>
        <p className='text-sm'>{pressureData(pressure)}</p>
    </div>
  )
}

export default Pressure