"use client";

/**
 * ProfileViewHeader — the read-only header used in view mode on /u/me.
 * Mirrors the shape of /u/[handle]'s top block so the owner sees the same
 * thing visitors do, plus an action slot for an "Edit profile" button.
 */

import Image from "next/image";
import type { User } from "@/lib/auth";

export function ProfileViewHeader({
  user,
  postCount,
  actionSlot,
}: {
  user: User;
  postCount: number;
  actionSlot?: React.ReactNode;
}) {
  return (
    <header className="flex flex-col sm:flex-row sm:items-center gap-5 sm:gap-6">
      <Avatar src={user.avatar_url} name={user.name} />
      <div className="flex-1 min-w-0">
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <h1 className="font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-3xl text-foreground leading-tight truncate">
              {user.name}
            </h1>
            <p className="text-sm text-muted-foreground mt-0.5">
              @{user.handle} ·{" "}
              <span className="tabular-nums">{postCount}</span> post
              {postCount === 1 ? "" : "s"}
            </p>
            <p className="text-xs text-muted-foreground mt-1">
              Joined {new Date(user.created_at).toLocaleDateString()}
            </p>
          </div>
          {actionSlot ? <div className="shrink-0">{actionSlot}</div> : null}
        </div>
      </div>
    </header>
  );
}

function Avatar({ src, name }: { src: string | null; name: string }) {
  if (src) {
    return (
      <Image
        src={src}
        alt={name}
        width={88}
        height={88}
        className="size-20 sm:size-22 rounded-full object-cover ring-1 ring-foreground/10"
        unoptimized
      />
    );
  }
  const initials =
    name
      .split(/\s+/)
      .map((p) => p[0])
      .slice(0, 2)
      .join("")
      .toUpperCase() || "?";
  return (
    <div className="size-20 sm:size-22 rounded-full bg-primary/15 text-primary flex items-center justify-center text-2xl font-semibold ring-1 ring-foreground/10">
      {initials}
    </div>
  );
}