<script lang="tsx">
import { defineComponent, type PropType } from 'vue'

export default defineComponent({
  props: {
    modelValue: {
      type: Boolean,
      required: true,
    },
    onValueChange: {
      type: Function as PropType<() => void>,
      required: true,
    },
  },
  setup(props) {
    return () => (
      <div
        class={`ark-ui-radio ${props.modelValue ? 'is-active' : ''}`}
        onClick={props.onValueChange}
      />
    )
  },
})
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';

.ark-ui-radio {
  position: relative;
  width: 14px;
  height: 14px;
  border: 2px solid $primary-color;
  border-radius: 50%;
  cursor: pointer;

  &.is-active {
    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 2px;
      left: 2px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: $primary-color;
    }
  }
}
</style>
