import Image from "next/image";
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;
}

/** Avatar + name + meta + edit-pencil pattern reused across nearly every settings/profile screen. */
export function ProfileCard({ name, meta, avatarUrl, onEdit }: ProfileCardProps) {
  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="flex h-10 w-10 items-center justify-center rounded-full bg-stone text-ink"
        >
          <Pencil className="h-3.5 w-3.5" aria-hidden="true" />
        </button>
      )}
    </Card>
  );
}