import { Lock } from "lucide-react"
import { getTranslations } from "next-intl/server"

import { requireAuth } from "@/shared/lib/auth-guard"
import { PasswordChangeForm } from "@/modules/settings/components/password-change-form"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { PageHeader } from "@/shared/components/ui/page-header"

export const dynamic = "force-dynamic"

export const metadata = {
  title: "Security Settings",
}

export default async function SecuritySettingsPage() {
  await requireAuth()
  const t = await getTranslations("settings")

  return (
    <div className="flex h-full flex-col gap-8 p-8">
      <PageHeader
        title={t("tabs.security")}
        description={t("security.changePassword.description")}
        icon={Lock}
      />

      <div className="max-w-2xl space-y-6">
        <PasswordChangeForm />

        <Card>
          <CardHeader>
            <CardTitle>{t("security.tips.title")}</CardTitle>
            <CardDescription>{t("security.tips.description")}</CardDescription>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>{t("security.tips.tip1")}</li>
              <li>{t("security.tips.tip2")}</li>
              <li>{t("security.tips.tip3")}</li>
              <li>{t("security.tips.tip4")}</li>
            </ul>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}