"use client";

import { useState } from "react";
import { Avatar } from "@/components/ui/Avatar";
import { CameraIcon } from "@/components/ui/CameraIcon";
import { AvatarEditModal } from "./AvatarEditModal";

export function AvatarWithEdit({
  username,
  avatarUrl,
  isOwner,
}: {
  username: string;
  avatarUrl: string | null;
  isOwner: boolean;
}) {
  const [open, setOpen] = useState(false);

  if (!isOwner) {
    return <Avatar username={username} avatarUrl={avatarUrl} size="lg" />;
  }

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label="Edit profile photo"
        className="group relative block rounded-full"
      >
        <Avatar username={username} avatarUrl={avatarUrl} size="lg" />
        <span className="absolute inset-0 flex items-center justify-center rounded-full bg-black/0 text-white opacity-0 transition group-hover:bg-black/50 group-hover:opacity-100">
          <CameraIcon />
        </span>
      </button>
      {open && (
        <AvatarEditModal
          username={username}
          avatarUrl={avatarUrl}
          onClose={() => setOpen(false)}
        />
      )}
    </>
  );
}