<script setup lang="ts">
import { ref } from 'vue'
import { RadioGroup } from 'reka-ui/namespaced'
import { motion, AnimatePresence, useMotionValue, useTransform } from 'motion-v'

const value = ref('default')
const scale = useMotionValue(1)
const borderWidth = useTransform(scale, [0.95, 1.05], [3, 1.5])

const sizes = ['default', 'comfortable', 'compact']

const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
</script>

<template>
  <div class="container">
    <RadioGroup.Root v-model="value" class="root">
      <div v-for="size in sizes" :key="size" class="item-wrapper">
        <RadioGroup.Item :value="size" :id="size" as-child>
          <motion.button
            class="radio-item"
            :style="{ scale, willChange: 'transform' }"
            :while-hover="{ scale: 1.05 }"
            :while-press="{ scale: 0.95 }"
          >
            <AnimatePresence>
              <RadioGroup.Indicator as-child>
                <motion.div 
                 initial="hidden"
                 animate="visible"
                 exit="hidden" class="indicator">
                  <motion.div
                    class="border"
                    :style="{ borderWidth }"
                    :variants="{
                      visible: {
                        borderColor: '#ffff',
                        scale: 1
                      },
                      hidden: {
                        borderColor: '#fff0',
                        scale: 0.95
                      }
                    }"
                    :transition="{
                      duration: 0.2,
                      ease: 'easeOut'
                    }"
                  />
                  <motion.div
                    class="dot"
                    :variants="{
                      visible: {
                        scale: 1,
                        opacity: 1
                      },
                      hidden: {
                        scale: 0,
                        opacity: 0
                      }
                    }"
                    :transition="{
                      type: 'spring',
                      stiffness: 400,
                      damping: 25
                    }"
                  />
                </motion.div>
              </RadioGroup.Indicator>
            </AnimatePresence>
          </motion.button>
        </RadioGroup.Item>
        <label class="label" :for="size">
          {{ capitalize(size) }}
        </label>
      </div>
    </RadioGroup.Root>
  </div>
</template>

<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.root {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item-wrapper {
  display: flex;
  align-items: center;
}

.radio-item {
  background-color: var(--layer);
  border: 1px solid var(--border);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.border {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border-style: solid;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #ff0088;
}

.label {
  color: #f5f5f5;
  padding-left: 15px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
</style>