'use client';

import Image from 'next/image';

interface ConversationItemProps {
  id: string;
  name: string;
  avatar: string;
  lastMessage: string;
  date: string;
  isOnline?: boolean;
  isSelected?: boolean;
  onClick?: () => void;
}

export function ConversationItem({
  id,
  name,
  avatar,
  lastMessage,
  date,
  isOnline = false,
  isSelected = false,
  onClick,
}: ConversationItemProps) {
  return (
    <div
      onClick={onClick}
      className={`flex items-start gap-3 p-4 border border-[#00293d]/10 rounded-[15px] cursor-pointer transition-colors ${
        isSelected ? 'bg-[#00293d]/5' : 'hover:bg-[#00293d]/5'
      }`}
    >
      {/* Avatar with online indicator */}
      <div className="relative flex-shrink-0">
        <div className="w-[70px] h-[70px] rounded-full overflow-hidden">
          <Image
            src={avatar}
            alt={name}
            width={70}
            height={70}
            className="w-full h-full object-cover"
          />
        </div>
        {isOnline && (
          <div className="absolute bottom-1 right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white" />
        )}
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0">
        <p className="font-fractul font-medium text-[14px] leading-[17px] text-[#00293D] mb-1">
          {name}
        </p>
        <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] line-clamp-2">
          {lastMessage}
        </p>
      </div>

      {/* Date */}
      <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] flex-shrink-0">
        {date}
      </p>
    </div>
  );
}
