<script setup lang="ts">
import { computed, useAttrs } from 'vue'
import type { FdsHrProps } from './types'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<FdsHrProps>(), {
  dataTestid: undefined,
})

const attrs = useAttrs()

const rootAttrs = computed(() => {
  const result: Record<string, unknown> = { ...attrs }
  if (props.dataTestid) {
    result['data-testid'] = props.dataTestid
  }
  return result
})
</script>

<template>
  <hr v-bind="rootAttrs" class="block border-0 h-px w-full bg-black/12 my-4" />
</template>
