<script lang="ts">
  import { Icon, Check, Minus, XMark } from 'svelte-hero-icons';

  export let fieldName: string;
  export let data: any;
  export let type: 'string' | 'date' | 'number' | 'boolean' = 'string';
  export let isLink: boolean = false;
  export let linkTarget: string = "";

  export let compactView = false;
  $: extendedView = !compactView;

</script>

<td

  class:compact-view={compactView}
  class:extended-view={extendedView}

  class:boolean-data={type === 'boolean'}
  class:string-data={type === 'string'}
  class:number-data={type === 'number'}
  class:date-data={type === 'date'}
  class:empty-data={data === null || data === undefined}
>
  {#if compactView}
    <p class="field-name">{fieldName}:</p>
  {/if}

  {#if data === null || data === undefined}
    <Icon src={Minus} mini class="field-data w-6 h-6 text-primary/40" />
  {:else}
    {#if type === 'date'}
      <p class="field-data">{new Date(data).toLocaleDateString()}</p>
    {:else if type === 'boolean'}
      {#if data}
        <Icon src={Check} mini class="field-data w-6 h-6 text-success/50" />
      {:else}
        <Icon src={XMark} mini class="field-data w-6 h-6 text-failure/50" />
      {/if}
    {:else}
      {#if isLink}
        <a href={linkTarget} class="field-data">{data}</a>
      {:else}
        <p class="field-data">{data}</p>
      {/if}
    {/if}
  {/if}
</td>

<style>
  td.compact-view {
    @apply grid grid-cols-2 items-center justify-start gap-x-2;
  }
  .compact-view .field-name {
    @apply text-primary/50 font-light;
    @apply text-end;
  }
  .compact-view .field-data {
    @apply truncate;
    @apply font-medium;
  }
  td.compact-view.date-data .field-data, td.compact-view.number-data .field-data {
    @apply text-start;
  }

  td.extended-view {
    @apply table-cell;
  }
  td.extended-view.boolean-data, td.extended-view.empty-data {
    @apply flex justify-center;
  }
  td.extended-view.date-data .field-data, td.extended-view.number-data .field-data {
    @apply text-end;
  }
</style>
