"use client";

import { useState } from "react";

import { useMessages } from "@/i18n/locale-context";

export default function AboutTabs() {
  const t = useMessages();
  const [tab, setTab] = useState<"resume" | "goals">("resume");

  return (
    <div>
      <div className="tabs" role="tablist">
        <button type="button" className={tab === "resume" ? "active" : undefined} onClick={() => setTab("resume")}>
          {t.aboutTabs.resume}
        </button>
        <button type="button" className={tab === "goals" ? "active" : undefined} onClick={() => setTab("goals")}>
          {t.aboutTabs.goalsTab}
        </button>
      </div>
      {tab === "resume" ? (
        <p className="muted">{t.aboutTabs.resumeText}</p>
      ) : (
        <div>
          {t.aboutTabs.goalsParagraphs.map((paragraph) => (
            <p key={paragraph.slice(0, 24)} className="muted">
              {paragraph}
            </p>
          ))}
          <p className="muted">{t.aboutTabs.qualityIntro}</p>
          <ol className="muted">
            {t.aboutTabs.qualityPolicy.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ol>
        </div>
      )}
    </div>
  );
}