import { Button } from "@/components/ui/button";
import {
  BriefcaseBusiness,
  Calendar,
  MapPin,
  Search,
  Share,
} from "lucide-react";
import Image from "next/image";
import React from "react";

const ProfileHeader: React.FC = () => {
  return (
    <div className="">
      <div
        className="flex justify-center items-center h-[208px] flex-col relative pt-16 pb-8 bg-cover bg-center"
        style={{ backgroundImage: "url('/assets/images/interior.webp')" }}
      >
        <Image
          height={500}
          width={500}
          src="/assets/images/interior2.webp"
          alt="Profile"
          className="rounded-full border-4 absolute top-[60%] border-white w-28 h-28"
        />
        <div className="flex absolute top-4 right-4 items-center space-x-4">
          <Button
            variant={"ghost"}
            className="bg-black/50 text-white hover:bg-black/60 rounded-full"
            size={"icon"}
          >
            <Search className="icon !m-0" />
          </Button>
          <Button
            variant={"ghost"}
            className="bg-black/50 text-white hover:bg-black/60 rounded-full"
            size={"icon"}
          >
            <Share className="icon !m-0" />
          </Button>
        </div>
        <Button
          variant={"outline"}
          size="sm"
          className="absolute bottom-4 right-4 px-4 py-2 border text-white border-white rounded-full text-sm"
        >
          Edit Profile
        </Button>
      </div>
      <div className="flex justify-center flex-col container items-center mt-[39px]">
        <h4 className="">Jane Hiubert</h4>
        <p className="text-neutral-700">@hurbke</p>
        <p className="mt-2 text-center ">
          Lorem ipsum dolor sit amet consectetur. Nunc tempor purus ut nullam
          sit nam morbi condimentum ultricies. Scelerisque nulla tempus posuere
          eu nibh.
        </p>

        <div className="flex space-x-4 mt-4 text-neutral-700">
          <span className="flex items-center ">
            <BriefcaseBusiness className="icon" /> Entrepreneur
          </span>
          <span className="flex items-center ">
            <MapPin className="icon" />
            Lagos, Nigeria
          </span>
          <span className="flex items-center ">
            <Calendar className="icon" />
            Joined June 2025
          </span>
        </div>
        <div className="flex space-x-6 mt-6">
          <div className="text-center">
            <p className="font-bold text-sm">262</p>
            <p className="text-neutral-700 text-sm">Posts</p>
          </div>
          <div className="text-center">
            <p className="font-bold text-sm">262</p>
            <p className="text-neutral-700 text-sm">Following</p>
          </div>
          <div className="text-center">
            <p className="font-bold text-sm">262</p>
            <p className="text-neutral-700 text-sm">Followers</p>
          </div>
          <div className="text-center">
            <p className="font-bold text-sm">262</p>
            <p className="text-neutral-700 text-sm">Coins</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProfileHeader;