"use client";

import { Container } from "@/components/container";
import { SectionHeading } from "@/components/section-heading";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { AccountForm } from "@/components/auth/account-form";
import { ChangePasswordForm } from "@/components/auth/change-password-form";
import { useLanguage } from "@/lib/i18n/context";

export function AccountPageContent({
  user,
  hasPassword,
}: {
  user: {
    firstName: string;
    lastName: string;
    email: string;
    avatarUrl: string | null;
    timezone: string;
    language: "EN" | "ES";
    country: string | null;
  };
  hasPassword: boolean;
}) {
  const { t } = useLanguage();
  const a = t.app.account;

  return (
    <div className="min-h-[calc(100dvh-4rem)] bg-radial-spotlight py-16">
      <Container className="max-w-2xl">
        <SectionHeading
          align="left"
          eyebrow={a.eyebrow}
          title={a.title}
          description={a.description}
          className="mb-8"
        />

        <Tabs defaultValue="profile">
          <TabsList>
            <TabsTrigger value="profile">{a.tabProfile}</TabsTrigger>
            <TabsTrigger value="password">{a.tabPassword}</TabsTrigger>
          </TabsList>

          <TabsContent value="profile" className="rounded-2xl border border-border bg-card/60 p-6 glass-panel sm:p-8">
            <AccountForm user={user} />
          </TabsContent>

          <TabsContent value="password" className="rounded-2xl border border-border bg-card/60 p-6 glass-panel sm:p-8">
            {hasPassword ? (
              <ChangePasswordForm />
            ) : (
              <p className="text-sm text-muted-foreground">{a.noPasswordAccount}</p>
            )}
          </TabsContent>
        </Tabs>
      </Container>
    </div>
  );
}