"use client";

import { Button } from "@hexahost/ui";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import { useAuth } from "@/components/providers/auth-provider";

export function DashboardUserInfo() {
  const t = useTranslations("common");
  const tAuth = useTranslations("auth");
  const { user, isLoading, logout } = useAuth();

  if (isLoading) {
    return (
      <p className="font-mono text-xs text-zinc-500">{t("loading")}</p>
    );
  }

  if (!user) {
    return (
      <p className="font-mono text-xs text-zinc-500">
        {tAuth("sessionNone")}
      </p>
    );
  }

  const displayLabel = user.displayName ?? user.username;

  return (
    <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:gap-4">
      <div className="text-right sm:text-left">
        <p className="text-sm font-medium text-zinc-900 dark:text-zinc-50">{displayLabel}</p>
        <p className="font-mono text-xs text-zinc-500">{user.email}</p>
      </div>
      <div className="flex items-center gap-2">
        <Link
          href="/security"
          className="text-xs font-medium text-sky-600 hover:underline dark:text-sky-400"
        >
          {tAuth("securityTitle")}
        </Link>
        <Button variant="secondary" size="sm" onClick={() => void logout()}>
          {t("logout")}
        </Button>
      </div>
    </div>
  );
}
