<script lang="ts">
  import Toggle from '../elements/Toggle.svelte';

  const id = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString();
  export let title: string | undefined = undefined;
  export let subtitle: string | undefined = undefined;
  export let name: string | undefined = undefined;
  export let checked: boolean = false;
</script>

<div class="flex justify-between items-center">
  <div class="flex flex-col gap-2">
    <div class="flex justify-between">
      {#if title}
        <p class="text-text-header font-semibold text-2xl leading-[.8] whitespace-nowrap">
          {title}
        </p>
      {/if}
    </div>
    {#if subtitle}
      <p class="text-text-primary">{subtitle}</p>
    {/if}
    <slot />
  </div>
  <Toggle {id} {name} {checked} />
</div>
