<script lang="ts">
  export let title: string;
  export let subtitle: string | undefined = undefined;
  export let link: { url: string; text: string; tabindex?: number } | undefined = undefined;
  export let required: boolean = false;
  export let style: 'default' | 'title' | 'white' = 'default';
</script>

<div class="flex flex-col gap-2" class:style-title={style === 'title'} class:style-white={style === 'white'}>
  <div class="flex justify-between">
    <p class="title text-xs text-text-teritary">
      {title || ''}{#if required}<span class="text-accent">*</span>{/if}
    </p>
    {#if link}
      <a href={link.url} tabindex={link.tabindex}>{link.text}</a>
    {/if}
  </div>
  {#if subtitle}
    <p class="subtitle text-xs text-text-teritary">{subtitle}</p>
  {/if}
  <slot />
</div>

<style lang="postcss">
  .style-title {
    @apply gap-4;
  }

  .style-title p.title {
    @apply text-text-header font-semibold text-2xl leading-[.8] whitespace-nowrap;
  }

  .style-title p.subtitle {
    @apply text-base text-text-primary;
  }

  .style-white p.title {
    @apply font-semibold text-text-header;
  }
</style>
