---
interface Props {
  link: string;
  title: string;
  icon?: string;
}
---

<a
  href={Astro.props.link}
  class="rounded-diag-md border border-neutral p-4 overflow-hidden flex items-center justify-center pacity-50"
>
  <h2
    class="text-2xl flex gap-3 transition-gap items-center line-clamp text-ellipsis overflow-hidden"
  >
    {Astro.props.title}
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="icon icon-tabler icons-tabler-outline icon-tabler-circle-arrow-right"
      ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
        d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0 -18"></path><path d="M16 12l-4 -4"
      ></path><path d="M16 12h-8"></path><path d="M12 16l4 -4"></path></svg
    >
  </h2>
</a>