"use client";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Plus, PencilIcon } from "lucide-react";
import React from "react";
import { useState, useRef, useEffect } from "react";
import { AdaptiveText } from "../../user/profilepage/adaptiveText";
import { FaUser } from "react-icons/fa";

export default function ProfilePicture({
  src = "",
  alt = "Profile",
  viewMode = false,
  onUpload = () => {},
  userInfo = { name: "", age: 0, location: "" },
  onEditInfo = () => {},
}) {
  const handleUploadClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    if (viewMode) return;
    onUpload();
  };

  return (
    <div className="absolute -bottom-20 left-6 flex">
      <div className="relative">
        <div className="relative lg:h-[200px] md:h-48 md:w-48 w-40 h-40 lg:ml-10 rounded-none overflow-hidden">
          {src ? (
            <Image src={src} alt={alt} fill className="object-cover" />
          ) : (
            <div className="bg-gray-200 w-full h-full flex items-center justify-center">
              <FaUser className="text-gray-400 w-16 h-16" />
            </div>
          )}
        </div>
        {!viewMode && (
          <Button
            size="icon"
            onClick={handleUploadClick}
            className="absolute bottom-2 right-2 h-8 w-8 rounded-full bg-blue-500 hover:bg-blue-600 text-white"
          >
            <Plus className="h-5 w-5" />
          </Button>
        )}
      </div>

      <div className="ml-4 pb-4 mt-3">
        <div className="flex items-start">
          <h1 className={`text-xl font-bold`}>
            <AdaptiveText>
              {userInfo.name || "Anonymous"}
              {userInfo.age ? `, ${userInfo.age}` : ""}
            </AdaptiveText>
          </h1>
          {!viewMode && (
            <Button
              variant="ghost"
              size="icon"
              className={`h-6 w-6 ml-1 p-0`}
              onClick={onEditInfo}
            >
              <AdaptiveText>
                <PencilIcon className="h-4 w-4" />
              </AdaptiveText>
            </Button>
          )}
        </div>
        <p>
          <AdaptiveText>{userInfo.location || ""}</AdaptiveText>
        </p>
      </div>
    </div>
  );
}
