<script>
  let { recordType, name, value, displayName, displayValue, fqdn } = $props();
</script>

<div class="text m-2 mr-auto max-w-fit">
  {#if recordType === 'A' || recordType === 'AAAA'}
  <code class="bg-base-300 text-accent">
      {#if name}
        {displayName}
        {:else}
        <code class="text-primary-content/70">{displayName}</code>
        {/if}{fqdn}</code>
    points to
    <code class="bg-base-300 text-accent">
        {#if value}
        {displayValue}
        {:else}
        <code class="text-primary-content/70">{displayValue}</code>
        {/if}</code>
    {:else if recordType === 'CNAME'}
    <code class="bg-base-300 text-accent">
        {#if name}
        {displayName}
        {:else}
        <code class="text-primary-content/70">{displayName}</code>
        {/if}{fqdn}</code>
    redirects to
    <code class="bg-base-300 text-accent">
        {#if value}
        {displayValue}
        {:else}
        <code class="text-primary-content/70">{displayValue}</code>
        {/if}</code>
    {:else if recordType === 'NS'}
    <code class="bg-base-300 text-accent">
        {#if name}
        {displayName}
        {:else}
        <code class="text-primary-content/70">{displayName}</code>
        {/if}{fqdn}</code>
        has the nameserver
        <code class="bg-base-300">
        {#if value}
        {displayValue}
        {:else}
        <code class="text-primary-content/70">{displayValue}</code>
        {/if}</code>
    {:else if recordType === 'CNAME'}
    <code class="bg-base-300 text-accent">
        {#if name}
        {displayName}
        {:else}
        <code class="text-primary-content/70">{displayName}</code>
        {/if}{fqdn}</code>
    redirects to
    <code class="bg-base-300">
        {#if value}
        {displayValue}
        {:else}
        <code class="text-primary-content/70">{displayValue}</code>
        {/if}</code>
    {:else if recordType === 'MX'}
    <code class="bg-base-300 text-accent">
        {#if name}
        {displayName}
        {:else}
        <code class="text-primary-content/70">{displayName}</code>
        {/if}{fqdn}</code>
    has the mailserver
    <code class="bg-base-300">
        {#if value}
        {displayValue}
        {:else}
        <code class="text-primary-content/70">{displayValue}</code>
        {/if}</code>
    {:else if recordType === 'SRV'}
    A service of
    <code class="bg-base-300 text-accent">
        {#if name}
        {displayName}
        {:else}
        <code class="text-primary-content/70">{displayName}</code>
        {/if}{fqdn}</code>
    is hosted at
    <code class="bg-base-300">
        {#if value}
        {displayValue}
        {:else}
        <code class="text-primary-content/70">{displayValue}</code>
        {/if}</code>
    {:else if recordType === 'TXT'}
    <code class="bg-base-300 text-accent">
        {#if name}
        {displayName}
        {:else}
        <code class="text-primary-content/70">{displayName}</code>
        {/if}{fqdn}</code>
    has the content
    <code class="bg-base-300">
        {#if value}
        {displayValue}
        {:else}
        <code class="text-primary-content/70">{displayValue}</code>
        {/if}</code>
    {:else}
    Unknown record type
    {/if}
</div>