'use client';

import Image from 'next/image';

interface ChatHeaderProps {
  name: string;
  role: string;
  lastSeen: string;
  avatar: string;
  isOnline?: boolean;
  pronouns?: string;
  expertise?: string[];
}

export function ChatHeader({
  name,
  role,
  lastSeen,
  avatar,
  isOnline = false,
  pronouns,
  expertise = [],
}: ChatHeaderProps) {
  return (
    <div className="border-b border-[#00293d]/10 pb-4">
      {/* Top row - Name, status, actions */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <h2 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
            {name}
          </h2>
          <span className={`w-2.5 h-2.5 rounded-full ${isOnline ? 'bg-green-500' : 'bg-gray-400'}`} />
          <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">
            {role}
          </span>
          <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">
            {lastSeen}
          </span>
        </div>
        <div className="flex items-center gap-2">
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <Image
              src="/assets/icons/three-dots-horizontal-icon.svg"
              alt="More options"
              width={24}
              height={24}
            />
          </button>
          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <Image
              src="/assets/icons/star-outline-icon.svg"
              alt="Star conversation"
              width={24}
              height={24}
            />
          </button>
        </div>
      </div>

      {/* User profile row */}
      <div className="flex items-start gap-3">
        {/* Avatar */}
        <div className="relative flex-shrink-0">
          <div className="w-[50px] h-[50px] rounded-full overflow-hidden border border-[#00293D]/20">
            <Image
              src={avatar}
              alt={name}
              width={50}
              height={50}
              className="w-full h-full object-cover rounded-full"
            />
          </div>
          {isOnline && (
            <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white" />
          )}
        </div>

        {/* User info */}
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-1">
            <span className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
              {name}
            </span>
            <Image
              src="/assets/icons/shield-verified-icon.svg"
              alt="Verified"
              width={17}
              height={18}
            />
            {pronouns && (
              <span className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
                ({pronouns})
              </span>
            )}
          </div>

          {/* Expertise tags */}
          {expertise.length > 0 && (
            <div className="flex items-center gap-2 flex-wrap">
              {expertise.map((tag, index) => (
                <span key={index} className="flex items-center">
                  <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">
                    {tag}
                  </span>
                  {index < expertise.length - 1 && (
                    <span className="mx-2 text-[#00293d]/30">|</span>
                  )}
                </span>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}