---
import { Image } from 'astro:assets';
import translate from '$i18n/translate';
import tSite from '$i18n/translations/site';
import tComponent from '$i18n/translations/components/scotsoun';
import type Scotsoun from '$types/Scotsoun';
import PayPalButtons from './PayPalButtons.astro';
import relativePath from '$lib/relativePath';
import { getLocaleFromPathOrThrow } from '$lib/getLocaleFromPath';

interface Props {
  scotsoun: Scotsoun;
}

const { scotsoun } = Astro.props;
const locale = getLocaleFromPathOrThrow(Astro.url.pathname);
const t = translate(locale);
---

<section class="section--full-width">
  <div class="product__header-block">
    <header>
      <h1>{scotsoun.title}</h1>
      <p class="italic">Scotsoun SSCD{scotsoun.scotsounId}</p>
      {scotsoun?.subtitle && <p class="italic">{scotsoun.subtitle}</p>}
      {scotsoun?.author && <p>{t(tSite, { key: 'by' }) + ' ' + scotsoun.author}</p>}
    </header>
    <div class="product__action-block">
      <Image src={scotsoun.img.width192} alt="" />
      <PayPalButtons
        successPageUrl={relativePath(Astro.url.pathname, `payment-success-confirmation`)}
        productDescription={`SSCD${scotsoun.scotsounId} | ${scotsoun.longName}`}
        shortDescription={`SSCD${scotsoun.scotsounId}`}
        totalPrice={scotsoun.price}
      />
    </div>
  </div>
</section>

<section>
  {scotsoun?.description && <p set:html={scotsoun.description[locale]} />}

  {
    scotsoun?.coverArtist && (
      <p>{t(tComponent, { key: 'cover-artist', coverArtist: scotsoun.coverArtist })}</p>
    )
  }

  {
    scotsoun?.releaseDate && (
      <p>{t(tComponent, { key: 'release-date', releaseDate: scotsoun.releaseDate })}</p>
    )
  }

  {
    scotsoun?.trackList && scotsoun.trackList.length > 1 && (
      <>
        <h2>Track list</h2>
        <ol class="product__track-list">
          {scotsoun.trackList.map((track) => (
            <li>{track}</li>
          ))}
        </ol>
      </>
    )
  }
</section>