<script setup lang="ts">
import { computed } from 'vue';
import { cn } from '@/lib/utils';
import { RadioGroup as ShadcnRadioGroup } from '@/components/core/radio-group';
import { type UiRadioGroupProps } from './types';

defineOptions({
  name: 'UiRadioGroup',
});

const props = withDefaults(defineProps<UiRadioGroupProps>(), {
  asChild: false,
  disabled: false,
  required: false,
  orientation: 'vertical',
  dir: 'ltr',
  loop: true,
});

const model = defineModel<string>({
  required: false,
});

const orientationClass = computed(() =>
  cn(
    props.orientation === 'horizontal' ? 'flex flex-wrap gap-3' : 'grid gap-3',
  ),
);
</script>

<template>
  <ShadcnRadioGroup
    v-model="model"
    :name
    :disabled
    :required
    :as-child
    :orientation
    :dir
    :loop
    :class="orientationClass"
  >
    <slot />
  </ShadcnRadioGroup>
</template>
