'use client';

import Image from 'next/image';

interface InvitationCardProps {
  id: string;
  name: string;
  avatar: string;
  description: string;
  mutualConnection?: string;
  onAccept?: (id: string) => void;
  onIgnore?: (id: string) => void;
}

export function InvitationCard({
  id,
  name,
  avatar,
  description,
  mutualConnection,
  onAccept,
  onIgnore,
}: InvitationCardProps) {
  return (
    <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 py-4">
      {/* Avatar */}
      <div className="flex-shrink-0">
        <Image
          src={avatar}
          alt={name}
          width={80}
          height={80}
          className="rounded-full object-cover w-[80px] h-[80px]"
        />
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0">
        {/* Name with verified icon */}
        <div className="flex items-center gap-2 mb-1">
          <h3 className="font-serif font-bold text-[14px] leading-[19px] text-[#00293D]">
            {name}
          </h3>
          <Image
            src="/assets/icons/shield-verified-icon.svg"
            alt="Verified"
            width={19}
            height={19}
          />
        </div>

        {/* Description */}
        <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] mb-1">
          {description}
        </p>

        {/* Mutual Connection */}
        {mutualConnection && (
          <div className="flex items-center gap-2">
            <Image
              src="/assets/icons/chain-icon.svg"
              alt="Connection"
              width={18}
              height={18}
            />
            <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">
              Mutual Connection With {mutualConnection}
            </span>
          </div>
        )}
      </div>

      {/* Action Buttons */}
      <div className="flex items-center gap-3 flex-shrink-0">
        <button
          onClick={() => onIgnore?.(id)}
          className="h-[27px] px-4 rounded-[15px] border border-[#00293d] font-serif font-light text-[14px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors cursor-pointer"
        >
          Ignore
        </button>
        <button
          onClick={() => onAccept?.(id)}
          className="h-[27px] px-4 rounded-[15px] bg-[#e58625] font-fractul font-medium text-[14px] text-[#00293D] hover:bg-[#d47920] transition-colors cursor-pointer"
        >
          Accept
        </button>
      </div>
    </div>
  );
}
