frontend/src/components/profile/ProfileCard.tsx

'use client';

import Image from 'next/image';
import Link from 'next/link';
import { Tag } from './Tag';

interface ProfileCardProps {
  firstName: string;
  lastName: string;
  isVerified: boolean;
  title: string;
  location: string;
  memberSince: string;
  bio: string;
  expertise: string[];
  showEditButton?: boolean;
  editHref?: string;
  messageHref?: string;
  requestsHref?: string;
}

export function ProfileCard({
  firstName,
  lastName,
  isVerified,
  title,
  location,
  memberSince,
  bio,
  expertise,
  showEditButton = false,
  editHref = '/agent/edit',
  messageHref,
  requestsHref,
}: ProfileCardProps) {
  return (
    <div className="bg-white rounded-[20px] p-4 lg:p-5">
      {/* Name and Actions Row */}
      <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
        <div className="text-center lg:text-left">
          <div className="flex items-center justify-center lg:justify-start gap-2 mb-1">
            <h1 className="text-[18px] text-[#00293d] font-serif">
              <span className="font-semibold">{firstName}</span>{' '}
              <span className="font-normal">{lastName}</span>
            </h1>
            {isVerified && (
              <>
                <Image
                  src="/assets/icons/verified-icon.svg"
                  alt="Verified"
                  width={15}
                  height={14}
                />
                <span className="text-[14px] text-[#638559] font-medium font-serif">
                  (Verified Expert)
                </span>
              </>
            )}
            {showEditButton && (
              <Link href={editHref} className="p-1 hover:bg-gray-100 rounded transition-colors">
                <Image
                  src="/assets/icons/edit-pencil-orange-icon.svg"
                  alt="Edit profile"
                  width={16}
                  height={16}
                />
              </Link>
            )}
          </div>
          <p className="text-[#00293d] text-sm mb-2 font-fractul">{title}</p>
          <div className="flex items-center justify-center lg:justify-start gap-4 text-sm text-[#00293d] font-fractul">
            <span className="flex items-center gap-1">
              <Image
                src="/assets/icons/location-pin-icon.svg"
                alt="Location"
                width={21}
                height={19}
              />
              <span className="text-[14px] font-bold text-[#00293D] font-serif leading-[19px]">
                {location}
              </span>
            </span>
            <span className="flex items-center gap-1">
              <Image
                src="/assets/icons/calendar-icon.svg"
                alt="Calendar"
                width={23}
                height={21}
              />
              <span className="text-[13px] font-medium text-[#00293D] font-serif leading-[18px]">
                Member Since {memberSince}
              </span>
            </span>
          </div>
        </div>

        {/* Action Buttons */}
        <div className="flex items-center justify-center lg:justify-start gap-3">
          {messageHref ? (
            <Link
              href={messageHref}
              className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
            >
              <Image
                src="/assets/icons/message-dark-icon.svg"
                alt="Message"
                width={14}
                height={13}
              />
              Message
            </Link>
          ) : (
            <button
              className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
            >
              <Image
                src="/assets/icons/message-dark-icon.svg"
                alt="Message"
                width={14}
                height={13}
              />
              Message
            </button>
          )}
          {requestsHref ? (
            <Link
              href={requestsHref}
              className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
            >
              <Image
                src="/assets/icons/requests-dark-icon.svg"
                alt="Connect"
                width={14}
                height={13}
              />
              {showEditButton ? 'Requests' : 'Connect'}
            </Link>
          ) : (
            <button
              className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
            >
              <Image
                src="/assets/icons/requests-dark-icon.svg"
                alt="Connect"
                width={14}
                height={13}
              />
              {showEditButton ? 'Requests' : 'Connect'}
            </button>
          )}
        </div>
      </div>

      {/* Bio */}
      <p className="text-[14px] font-normal text-[#00293D] font-serif leading-[20px] mb-4 text-center lg:text-left">
        {bio}
      </p>

      {/* Expertise Tags */}
      <div>
        <p className="text-[14px] font-bold text-[#00293D] font-fractul leading-[17px] mb-2 text-center lg:text-left">
          Expertise:
        </p>
        <div className="flex flex-wrap gap-2 justify-center lg:justify-start">
          {expertise.map((tag, idx) => (
            <Tag key={idx}>{tag}</Tag>
          ))}
        </div>
      </div>
    </div>
  );
}