<script setup lang="ts">
// Landing button. Variants: primary (signal fill), secondary (outline), ghost.
// Ported from landing-sections.jsx Button. Named Btn.vue to avoid colliding
// with any shared <Button> in @dezky/ui.
import { computed } from 'vue'
import { C } from '~/utils/landingTokens'
import { useTheme } from '~/composables/useLanding'

const props = withDefaults(defineProps<{
  variant?: 'primary' | 'secondary' | 'ghost'
  size?: 'md' | 'lg'
  full?: boolean
}>(), {
  variant: 'primary',
  size: 'md',
  full: false,
})

const t = useTheme()

const style = computed(() => {
  const base = {
    primary: { background: C.signal, color: C.carbon, border: `1px solid ${C.signal}` },
    secondary: { background: 'transparent', color: t.value.fg, border: `1px solid ${t.value.borderStrong}` },
    ghost: { background: 'transparent', color: t.value.fg, border: '1px solid transparent' },
  }[props.variant]
  return {
    ...base,
    padding: props.size === 'lg' ? '18px 28px' : '14px 22px',
    fontSize: props.size === 'lg' ? '15px' : '14px',
    fontWeight: 600,
    fontFamily: '\'Inter\', sans-serif',
    borderRadius: '4px',
    letterSpacing: '-0.005em',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '10px',
    width: props.full ? '100%' : 'auto',
    whiteSpace: 'nowrap',
    transition: 'transform 0.1s ease, box-shadow 0.15s ease',
  }
})
</script>

<template>
  <button :style="style"><slot /></button>
</template>
