import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { ArrowLeft } from "lucide-react";
import CategoriesCard from "../../components/settings/CategoriesCard";
import DataManagementCard from "../../components/settings/DataManagementCard";
import { PriceFetchConsentToggle } from "../../components/settings/PriceFetchConsentToggle";

export default function DataSettingsPage() {
  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.data.title")}</h1>

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

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

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