import { getDictionary, isLocale, type Locale } from "@/lib/i18n";
import { notFound } from "next/navigation";

export default function AboutPage({ params }: { params: { locale: string } }) {
  if (!isLocale(params.locale)) {
    notFound();
  }

  const locale = params.locale as Locale;
  const dictionary = getDictionary(locale);

  return (
    <section className="panel">
      <p className="eyebrow">{dictionary.about.kicker}</p>
      <h1>{dictionary.about.title}</h1>
      <p className="lead">{dictionary.about.story}</p>

      <div className="split-grid">
        <article className="card">
          <h2>{dictionary.about.skillsTitle}</h2>
          <ul className="list">
            {dictionary.about.skills.map((skill) => (
              <li key={skill}>{skill}</li>
            ))}
          </ul>
        </article>

        <article className="card">
          <h2>{dictionary.about.experienceTitle}</h2>
          <ul className="list">
            {dictionary.about.experience.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </article>
      </div>
    </section>
  );
}