import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { ArrowLeft } from "lucide-react";
import AccountCard from "../../components/settings/AccountCard";
import LicenseCard from "../../components/settings/LicenseCard";
import DocsContent from "../../components/settings/DocsContent";

export default function UsersSettingsPage() {
  const { t } = useTranslation();

  return (
    <div className="space-y-6">
      <Link
        to="/settings"
        className="inline-flex items-center gap-2 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
      >
        <ArrowLeft size={16} />
        {t("settings.backToHome")}
      </Link>

      <h1 className="text-2xl font-bold">{t("settings.users.title")}</h1>

      <section className="space-y-3">
        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
          {t("settings.users.sections.accounts")}
        </h2>
        <AccountCard />
      </section>

      <section className="space-y-3">
        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
          {t("settings.users.sections.licenses")}
        </h2>
        <LicenseCard />
      </section>

      <section className="space-y-3">
        <h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
          {t("settings.users.sections.userGuide")}
        </h2>
        <DocsContent />
      </section>
    </div>
  );
}