'use client';

import Image from 'next/image';

interface ProfileSidebarProps {
  profileImage: string;
  email: string;
  phone: string;
}

export function ProfileSidebar({ profileImage, email, phone }: ProfileSidebarProps) {
  return (
    <div className="w-full lg:w-[220px] flex-shrink-0 space-y-4 flex flex-col items-center lg:items-start">
      {/* Profile Image */}
      <div className="relative w-[200px] h-[200px]">
        <div className="w-full h-full rounded-[15px] overflow-hidden border-4 border-[#5ba4a4]">
          <Image
            src={profileImage}
            alt="Profile"
            width={200}
            height={200}
            className="w-full h-full object-cover"
          />
        </div>
        {/* Gradient Overlay - subtle darkening at bottom */}
        <div className="absolute inset-0 rounded-[15px] bg-gradient-to-t from-black/40 via-transparent to-transparent pointer-events-none" />
        {/* Edit Icon - Center */}
        <button className="absolute top-[calc(50%-18px)] left-[calc(50%-18px)] w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
          <Image
            src="/assets/icons/edit-icon.svg"
            alt="Edit profile"
            width={20}
            height={20}
          />
        </button>
      </div>

      {/* Status Buttons */}
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <div className="flex items-center gap-1.5">
            <span className="w-2 h-2 bg-green-500 rounded-full" />
            <span className="text-sm text-[#00293d]">Available.</span>
          </div>
          <button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
            Connect
          </button>
        </div>
        <div className="flex items-center gap-2">
          <div className="flex items-center gap-1.5">
            <span className="w-2 h-2 bg-white border border-gray-400 rounded-full" />
            <span className="text-sm text-[#00293d]">Unavailable.</span>
          </div>
          <button className="px-4 py-1.5 bg-[#5ba4a4] text-white text-sm rounded-full hover:bg-[#4a9393] transition-colors">
            Connect
          </button>
        </div>
      </div>

      {/* Contact Info */}
      <div className="space-y-2 pt-2">
        <div className="flex items-center gap-2 text-sm">
          <span className="font-bold text-[#00293d]">Email:</span>
          <span className="text-[#00293d]">{email}</span>
        </div>
        <div className="flex items-center gap-2 text-sm">
          <span className="font-bold text-[#00293d]">Ph.No:</span>
          <span className="text-[#00293d]">{phone}</span>
          <button className="p-1 hover:bg-gray-100 rounded">
            <Image
              src="/assets/icons/edit-pencil-icon.svg"
              alt="Edit phone"
              width={16}
              height={16}
            />
          </button>
        </div>
      </div>
    </div>
  );
}
