---
import BaseLayout from './BaseLayout.astro';

import type { PlaylistSnapshot } from '../models/playlist-snapshot';

interface Props {
  playlist: PlaylistSnapshot | null;
  title: string;
  description: string;
}

const { playlist, title, description } = Astro.props as Props;
---

<BaseLayout title={title} description={description}>
  <div
    class:list={[
      'text-center flex flex-col gap-5 items-center',
      playlist ? 'mt-24' : 'w-screen h-screen justify-center'
    ]}
  >
  {
    playlist ? (
      <h1 class="font-bold text-4xl">
        <a href={playlist.url} target="_blank" rel="noopener noreferrer">
          {title}
        </a>
        by
        <a
          href={playlist.owner.url}
          target="_blank"
          rel="noopener noreferrer"
        >
          {playlist.owner.name}
        </a>
      </h1>
      <div class="tabs mb-4">
        <a class="tab text-base">
          <i class="fa-solid fa-calendar mr-3" />
          Browse snapshots
        </a>
        <a class="tab text-base">
          <i class="fa-solid fa-plus-minus mr-3" />
          Compare snapshots
        </a>
        <a class="tab text-base">
          <i class="fa-solid fa-chart-line mr-3" />
          Show statistics
        </a>
      </div>
      <slot />
    ) : (
    <div class="alert alert-error max-w-xs justify-center shadow-lg">
      <span>{description}</span>
    </div>
    )
  }
  </div>
</BaseLayout>