<script lang="ts">
  import type { WorkbenchChannel } from '../types';

  export let channel: WorkbenchChannel;
  let copyStatus = '';
  let copyFailed = false;

  async function copyUrl() {
    if (!navigator.clipboard?.writeText) {
      copyFailed = true;
      copyStatus = 'Copy unavailable in this browser.';
      return;
    }

    try {
      await navigator.clipboard.writeText(channel.url ?? '');
      copyFailed = false;
      copyStatus = 'URL copied.';
    } catch {
      copyFailed = true;
      copyStatus = 'Unable to copy URL.';
    }
  }
</script>

<section class="channel-page custom-link-channel">
  <header class="channel-header"><p>External resource</p><h1>{channel.title}</h1></header>
  <p>{channel.url}</p>
  <a class="custom-link" href={channel.url} target="_blank" rel="noreferrer">Open external channel</a>
  <button class="copy-url-button" type="button" on:click={copyUrl}>Copy URL</button>
  {#if copyStatus}
    <p class:copy-error={copyFailed} class="copy-feedback" aria-live="polite">{copyStatus}</p>
  {/if}
</section>
