"use client";

import { notFound, useParams } from "next/navigation";
import storyData from "../storiesData.json";
import "../iframeStyles.css";

interface Story {
  slug: string;
  title: string;
  iframeURL: string;
}

export default function StoryPage() {
  const params = useParams();
  const slug = params.slug as string;

  const story = storyData.find((p) => p.slug === slug);

  if (!story) {
    notFound();
  }

  return (
    <main className="flex flex-col items-center">
      <h1 className="med hidden">{story.title}</h1>
      <iframe
        src={story.iframeURL}
        className="responsive-iframe-wrapper"
        allowFullScreen
      ></iframe>
    </main>
  );
}