"use client";

import { useState } from "react";

import { goalsText, qualityPolicy, resumeText } from "@/data/site";

export default function AboutTabs() {
  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")}>
          رزومه
        </button>
        <button type="button" className={tab === "goals" ? "active" : undefined} onClick={() => setTab("goals")}>
          اهداف
        </button>
      </div>
      {tab === "resume" ? (
        <p className="muted">{resumeText}</p>
      ) : (
        <div>
          {goalsText.map((paragraph) => (
            <p key={paragraph.slice(0, 24)} className="muted">
              {paragraph}
            </p>
          ))}
          <p className="muted">خط مشی کیفیت عبارت است از:</p>
          <ol className="muted">
            {qualityPolicy.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ol>
        </div>
      )}
    </div>
  );
}