<script setup>
import {ref} from 'vue'
import AisField from '@c/field/AisField.vue'
import AisInputGroup from '@/components/input-group/AisInputGroup.vue'
import AisAddon from '@c/addon/AisAddon.vue'
import AisInput from '@/components/input/AisInput.vue'
import AisRadioGroup from '@c/radio-group/AisRadioGroup.vue'

import { faTemperatureHigh } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'

library.add(faTemperatureHigh)
let tempScale = ref('Fahrenheit')
</script>

<template>
  <AisField label="Forecast" description="What will the temperature be tomorrow?">
    <AisInputGroup class="rounded-sm">
      <AisAddon :icon="faTemperatureHigh" />
      <AisInput placeholder="Temperature..." size="md" class="w-36" />
      <AisAddon>
        <AisRadioGroup v-model="tempScale" :options="['Fahrenheit', 'Celsius']" gap="gap-5" />
      </AisAddon>
    </AisInputGroup>
  </AisField>
</template>

