import Image from "next/image";
import Link from "next/link";
import { Pencil } from "lucide-react";
import type { ReactNode } from "react";
import { Card } from "@/components/ui/card";

export interface ProfileCardProps {
  name: string;
  meta?: ReactNode;
  avatarUrl?: string;
  onEdit?: () => void;
  /** Renders the edit-pencil as a `<Link>` instead of a button — lets a Server Component page use the edit affordance without becoming a Client Component. Ignored if `onEdit` is also passed. */
  editHref?: string;
}

/** Avatar + name + meta + edit-pencil pattern reused across nearly every settings/profile screen. */
export function ProfileCard({ name, meta, avatarUrl, onEdit, editHref }: ProfileCardProps) {
  const editButtonClassName = "flex h-10 w-10 items-center justify-center rounded-full bg-stone text-ink";

  return (
    <Card className="flex items-center gap-4 p-5">
      {avatarUrl ? (
        <Image
          src={avatarUrl}
          alt=""
          width={64}
          height={64}
          className="h-16 w-16 rounded-full border border-line object-cover"
        />
      ) : (
        <div className="flex h-16 w-16 items-center justify-center rounded-full border border-line bg-stone text-xl font-bold text-muted">
          {name.charAt(0)}
        </div>
      )}
      <div className="flex-1">
        <h2 className="text-lg font-bold">{name}</h2>
        {meta && <div className="mt-0.5 text-xs text-muted">{meta}</div>}
      </div>
      {onEdit ? (
        <button type="button" onClick={onEdit} aria-label={`Edit ${name}`} className={editButtonClassName}>
          <Pencil className="h-3.5 w-3.5" aria-hidden="true" />
        </button>
      ) : (
        editHref && (
          <Link href={editHref} aria-label={`Edit ${name}`} className={editButtonClassName}>
            <Pencil className="h-3.5 w-3.5" aria-hidden="true" />
          </Link>
        )
      )}
    </Card>
  );
}