---
import path from "node:path";

import DefaultLayout from "../../layouts/DefaultLayout.astro";
import SectionRenderer from "../../components/sections/SectionRenderer.astro";
import OffersPhoneCards from "../../islands/phone/PhoneCards.jsx";

import { loadYamlFile } from "../../lib/loadYaml";

type SeoYaml = any;

type PhoneParam = {
  klucz: string;
  label: string;
  value: string | number;
};

type PhoneCard = {
  nazwa: string;
  widoczny?: boolean;
  popularny?: boolean;
  cena?: { wartosc: number; opis?: string };
  parametry?: PhoneParam[];
};

type PhoneCardsYaml = {
  tytul?: string;
  opis?: string;
  cards?: PhoneCard[];
};

const seo = loadYamlFile<SeoYaml>(
  path.join(process.cwd(), "src", "content", "telefon", "seo.yaml"),
);

const phoneCards = loadYamlFile<PhoneCardsYaml>(
  path.join(process.cwd(), "src", "content", "telefon", "cards.yaml"),
);

const tytul = phoneCards?.tytul ?? "";
const opis = phoneCards?.opis ?? "";

const cards: PhoneCard[] = Array.isArray(phoneCards?.cards)
  ? phoneCards.cards.filter((c) => c?.widoczny === true)
  : [];
---

<DefaultLayout seo={seo}>
  <section class="f-section">
    <div class="f-section-grid-single md:grid-cols-1">
      <h1 class="f-section-title">Usługa telefonu</h1>

      <OffersPhoneCards client:load title={tytul} description={opis} cards={cards} />
    </div>
  </section>

  <SectionRenderer src="./src/content/telefon/section.yaml" />
</DefaultLayout>