'use client';

import Image from 'next/image';
import { Button } from '@/components/ui/Button';
import { Tag } from './Tag';

interface ProfileHeaderProps {
  name: string;
  isVerified: boolean;
  title: string;
  location: string;
  memberSince: string;
  bio: string;
  expertise: string[];
}

export function ProfileHeader({
  name,
  isVerified,
  title,
  location,
  memberSince,
  bio,
  expertise,
}: ProfileHeaderProps) {
  const [firstName, lastName] = name.split(' ');

  return (
    <div className="bg-white rounded-[20px] border border-gray-200 p-6">
      {/* Name and Actions Row */}
      <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
        <div>
          {/* Name and Verification */}
          <div className="flex items-center gap-2 mb-1">
            <h1 className="text-[18px] text-[#00293d] font-[family-name:var(--font-fractul)]">
              <span className="font-bold">{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>
              </>
            )}
            <button className="p-1 hover:bg-gray-100 rounded transition-colors">
              <Image
                src="/assets/icons/edit-pencil-orange-icon.svg"
                alt="Edit name"
                width={19}
                height={19}
              />
            </button>
          </div>

          {/* Title */}
          <p className="text-[#00293d] text-sm mb-2">{title}</p>

          {/* Location and Member Since */}
          <div className="flex items-center gap-4 text-sm text-[#00293d]">
            <span className="flex items-center gap-1 text-[#e58625] font-medium">
              <Image
                src="/assets/icons/location-icon.svg"
                alt="Location"
                width={16}
                height={16}
              />
              {location}
            </span>
            <span className="flex items-center gap-1">
              <Image
                src="/assets/icons/calendar-icon.svg"
                alt="Calendar"
                width={16}
                height={16}
              />
              Member Since {memberSince}
            </span>
          </div>
        </div>

        {/* Action Buttons */}
        <div className="flex items-center gap-3">
          <Button
            variant="action"
            size="sm"
            leftIcon={
              <Image
                src="/assets/icons/message-icon.svg"
                alt="Message"
                width={16}
                height={16}
              />
            }
          >
            Message
          </Button>
          <Button
            variant="action"
            size="sm"
            leftIcon={
              <Image
                src="/assets/icons/clipboard-icon.svg"
                alt="Requests"
                width={16}
                height={16}
              />
            }
          >
            Requests
          </Button>
        </div>
      </div>

      {/* Bio */}
      <p className="text-[#00293d] text-sm leading-relaxed mb-4">{bio}</p>

      {/* Expertise Tags */}
      <div>
        <p className="font-bold text-[#00293d] text-sm mb-2">Expertise:</p>
        <div className="flex flex-wrap gap-2">
          {expertise.map((tag, idx) => (
            <Tag key={idx}>{tag}</Tag>
          ))}
        </div>
      </div>
    </div>
  );
}