"use client"
import { useGlobalContext } from '@/app/context/globalContext';
import { kelvinToFarenheit } from '@/app/utils/Misc';
import { Skeleton } from '@/components/ui/skeleton';
import React from 'react'
import { BsThermometerHalf } from "react-icons/bs";

const FeelLike = () => {
  const {forecast} = useGlobalContext();
  if(!forecast || !forecast?.main || !forecast?.main?.feels_like){
    return <Skeleton className='h-[12 rem] w-full'/>
  }
  const {feels_like, temp_min, temp_max} = forecast?.main;
  const feelLike = (feelsLike: number, mintemp: number, maxTemp: number) => {
    const avgTemp = (mintemp + maxTemp) /2;
    if(feelsLike < avgTemp - 3){
      return "Wind is making it feel colder";
    }
    if(feelsLike > avgTemp - 3 && feelsLike <= avgTemp + 3){
      return "Similar to the actual temperature";
    }
    if(feelsLike > avgTemp + 3){
      return "Sun is making it feel warm";
    }
    return "Temperature feelinf is typical for this range"
  };
  const feelLikeDesc = feelLike(feels_like, temp_min, temp_max);


  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'>< BsThermometerHalf/> Feels Like</h2>
        <p className='pt-4 text-2xl'>{kelvinToFarenheit(feels_like)} °F</p>
      </div>
      <p className='text-sm'>{feelLikeDesc}</p>
    </div>
  )
}

export default FeelLike