import Navbar from "./components/Navbar";
import AirPollution from "./components/airPollution/AirPollution";
import DailyForcast from "./components/daily_forcast/DailyForecast";
import FeelLike from "./components/feelLike/FeelLike";
import FiveDaysForecast from "./components/fiveDaysForecast/FiveDaysForecast";
import Humidity from "./components/humidity/Humidity";
import MapApp from "./components/map/MapApp";
import Pressure from "./components/pressure/Pressure";
import Sunset from "./components/sunset/Sunset";
import Temperature from "./components/temp/Temperature";
import UVI from "./components/uvIndex/UVI";
import Visibility from "./components/visibility/Visibility";
import Wind from "./components/wind/Wind";


export default function Home() {
  return (
    <main className="mx-[1rem] lg:mx-[2rem] xl:mx-[6rem] 2xl:mx-[16rem] m-auto">
      <Navbar/>
      <div className="flex flex-col pt-5 pb-5 gap-4 md:flex-row">
        <div className="flex flex-col gap-4 w-full min-w-[18rem] md:w-[35rem]">
          <Temperature/>
          <FiveDaysForecast/>
        </div>
        <div className="flex flex-col w-full">
          <div className="grid h-full gap-4 col-span-full sm-2:col-span-2 lg:grid-cols-3 xl:grid-cols-4">
            <AirPollution/>
            <Sunset/>
            <Wind/>
            <DailyForcast/>
            <UVI/>
            <FeelLike/>
            <Humidity/>
            <Visibility/>
            <Pressure/>
          </div>
          {/*--- map ---*/}
          <div className="mt-5 flex gap-4">
            <MapApp/>
          </div>
        </div>
      </div>
    </main>
  );
}
