import { defineComponent } from 'vue'
import useWeatherStore from './useWeatherStore'

export default defineComponent(() => {
  const weather = useWeatherStore()
  return () => (
    <div
      class="w-full h-full items-center pl-3 gap-x-2 flex py-3 text-white"
      style={{
        background: 'linear-gradient(135deg,#5996ff 0%,#4862ff 100%)'
      }}
    >
      <span class="text-[18px] font-bold">{weather.weatherData?.base.stemp}°</span>
      <div class={'h-full w-[1px] bg-white/[.2]'}></div>
      <div class="flex flex-col gap-y-[1px]">
        <div class="flex items-center gap-x-1">
          <span class="font-bold text-[14px] leading-[14px]">{weather.weatherData?.city.name}</span>
        </div>
        <span class={'tracking-tight flex gap-x-1 items-center'}>
          <span class="text-[12px]">{weather.weatherData?.base.weather}</span>
          <span class="text-[12px]">
            {weather.weatherData?.base.ltemp}°/{weather.weatherData?.base.htemp}°
          </span>
        </span>
      </div>
    </div>
  )
})