<script lang="ts">
  import type { Site } from '$lib/models/socials';

  export let hoverInvert: boolean = false;
  export let minimal: boolean = false;

  export let site: Site | undefined;
  export let social: BioSiteSocialLink;
</script>

{#if site}
  <a
    class="flex-grow"
    style="--color: {site.color}"
    href={`${site.type == 'EMAIL' ? 'mailto:' : site.baseUrl}${social.value}`}
    target="_blank"
    title={site.name}>
    <div
      class="w-full min-w-[95px] h-10 hover:opacity-80 transition-opacity rounded-lg flex justify-center items-center">
      <img class="w-5 h-5" alt="Icon" src={site.icon} />
    </div>
  </a>
{/if}

<!--  -->

<style lang="postcss">
  div {
    background: var(--color);
  }
</style>