import { Lock } from "lucide-react"

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()

  return (
    <div className="flex h-full flex-col gap-8 p-8">
      <PageHeader
        title="Security"
        description="Manage your password and account security settings."
        icon={Lock}
      />

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

        <Card>
          <CardHeader>
            <CardTitle>Security Tips</CardTitle>
            <CardDescription>Best practices to keep your account safe.</CardDescription>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>Use a unique password that you don&apos;t reuse across other sites.</li>
              <li>Avoid common words, names, or sequential patterns.</li>
              <li>Change your password periodically.</li>
              <li>Your account will be temporarily locked after multiple failed login attempts.</li>
            </ul>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}