---
import { Icon } from 'astro-icon/components';
import { twMerge } from 'tailwind-merge';
import type { CallToAction } from '~/types';

const {
  variant = 'secondary',
  target,
  text = Astro.slots.render("default"),
  icon = '',
  class: className = '',
  ...rest
} = Astro.props as CallToAction;

const variants = {
  primary: 'btn-primary' ,
  secondary: 'btn-secondary',
  tertiary: 'btn btn-tertiary',
  link: 'cursor-pointer hover:text-primary',
};
---

<a class={twMerge(variants[variant] || '', className)} {...target ? { target: target, rel: 'noopener noreferrer' } : {}} {...rest}>
  <Fragment set:html={text} />
  {icon && <Icon name={icon} class="w-5 h-5 ml-1 -mr-1.5 rtl:mr-1 rtl:-ml-1.5 inline-block" />}
</a>