import type { Metadata } from "next";
import { NavExternal } from "../../components/nav";
import HtmlComment from "../../components/html-comment";
import { profile, hobbies } from "../../lib/data";

export const metadata: Metadata = { title: "Hobi | Personal Website" };

export default function HobbiesPage() {
  return (
    <>
      {/* halaman ini WAJIB external css saja: semua gaya ada di public/styles.css */}
      <link rel="stylesheet" href="/styles.css" precedence="default" />

      <header className="site-header">
        <p className="brand">{profile.nickname}</p>
        <NavExternal current="/hobbies" />
      </header>

      <main className="container">
        <h1>Hobi Saya</h1>
        <p>Tiga hal yang biasa saya lakukan di waktu luang.</p>

        <HtmlComment text="tiap hobi dibuat sebagai section sendiri agar h2 dan h3 tetap berurutan" />
        {hobbies.map((hobby) => (
          <section className="hobby" key={hobby.title}>
            <img src={hobby.photo} alt={hobby.alt} width="260" height="195" />
            <div className="hobby-text">
              <h2>{hobby.title}</h2>
              <p>{hobby.description}</p>
              <h3>Yang biasa saya lakukan</h3>
              <ul>
                {hobby.details.map((detail) => (
                  <li key={detail}>{detail}</li>
                ))}
              </ul>
            </div>
          </section>
        ))}

        <section className="panel">
          <h2>Ingin mencoba juga?</h2>
          <p>
            Untuk pemula yang mau belajar ngegym silahkan{" "}
            <a href="https://www.tiktok.com/@daddygeeeeee?is_from_webapp=1&sender_device=pc" target="_blank" rel="noopener noreferrer">
              tonton dia ini
            </a>
            .
          </p>
        </section>
      </main>

      <footer className="site-footer">
        <p>
          &copy; {profile.year} {profile.name}
        </p>
      </footer>
    </>
  );
}