"use client";

import { AdminBreadcrumb } from "@/components/admin/admin-breadcrumb";
import { Card, CardContent } from "@/components/ui/card";
import { useLanguage } from "@/lib/i18n";
import { Bell, LockKeyhole, UserRound } from "lucide-react";
import Link from "next/link";

const settings = [
  {
    titleKey: "admin.profileSettings",
    descriptionKey: "admin.profileSettingsDescription",
    icon: UserRound,
    href: "/admin/update-profile?from=settings",
  },
  {
    titleKey: "admin.passwordSecurity",
    descriptionKey: "admin.passwordSecurityDescription",
    icon: LockKeyhole,
    href: "/admin/change-password?from=settings",
  },
  {
    titleKey: "admin.notifications",
    descriptionKey: "admin.notificationsDescription",
    icon: Bell,
    href: "/admin/coming-soon?module=notifications",
  },
] as const;

export default function AdminSettingsPage() {
  const { t } = useLanguage();

  return (
    <div className="space-y-6">
      <AdminBreadcrumb current="Settings" />

      <div className="grid gap-4 md:grid-cols-3">
        {settings.map((item) => (
          <Link key={item.titleKey} href={item.href} className="block">
            <Card className="rounded-3xl border-[var(--theme-border-soft)] bg-white py-0 shadow-sm">
              <CardContent className="p-5">
                <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--theme-surface-strong)] text-[var(--theme-primary)]">
                  <item.icon className="h-6 w-6" />
                </div>
                <h2 className="text-lg font-black text-foreground">
                  {t(item.titleKey)}
                </h2>
                <p className="mt-2 text-sm leading-6 text-muted-foreground">
                  {t(item.descriptionKey)}
                </p>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}