<script lang="ts">
  import { cn } from '@/lib/utils'
  import type { Snippet } from 'svelte'

  interface Props {
    href: string
    external?: boolean
    class?: string
    underline?: boolean
    children: Snippet
    [key: string]: unknown
  }

  let { href, external = false, class: className, underline = false, children, ...rest }: Props = $props()
</script>

<a
  {href}
  target={external ? '_blank' : '_self'}
  rel={external ? 'noopener noreferrer' : undefined}
  class={cn(
    'inline-block transition-colors duration-300 ease-in-out',
    underline && 'underline decoration-muted-foreground underline-offset-[3px] hover:decoration-foreground',
    className
  )}
  {...rest}
>
  {@render children()}
</a>
