import React, { useState } from 'react';
import { Comment } from '../../types';
import { Heart, MoreHorizontal } from 'lucide-react';

interface CommentItemProps {
  comment: Comment;
  onLike: (id: string) => void;
  onReply: (authorHandle: string) => void;
}

export const CommentItem: React.FC<CommentItemProps> = ({
  comment,
  onLike,
  onReply,
}) => {
  const [liked, setLiked] = useState(false);
  const [likeCount, setLikeCount] = useState(comment.likes);

  const handleLike = () => {
    setLiked(!liked);
    setLikeCount(liked ? likeCount - 1 : likeCount + 1);
    onLike(comment.id);
  };

  return (
    <div className="flex gap-3 text-sm py-2">
      <img
        src={comment.author.avatar}
        alt={comment.author.name}
        className="w-8 h-8 rounded-full object-cover flex-shrink-0 cursor-pointer"
      />
      <div className="flex-1 min-w-0">
        <div className="bg-kodo-ink/50 p-3 rounded-2xl rounded-tl-sm">
          <div className="flex justify-between items-baseline mb-1">
            <div className="flex gap-2 items-baseline">
              <span className="font-bold text-white cursor-pointer hover:underline">
                {comment.author.name}
              </span>
              <span className="text-gray-500 text-xs">{comment.timestamp}</span>
            </div>
          </div>
          <p className="text-gray-300 leading-relaxed whitespace-pre-wrap">
            {comment.content}
          </p>
        </div>

        <div className="flex items-center gap-4 mt-1 pl-2 text-xs text-gray-500">
          <button
            onClick={handleLike}
            className={`flex items-center gap-1 hover:text-kodo-magenta transition-colors ${liked ? 'text-kodo-magenta' : ''}`}
          >
            <Heart className={`w-3 h-3 ${liked ? 'fill-current' : ''}`} />{' '}
            {likeCount > 0 ? likeCount : 'Like'}
          </button>
          <button
            onClick={() => onReply(comment.author.handle)}
            className="hover:text-white transition-colors"
          >
            Reply
          </button>
          <button className="hover:text-white transition-colors">
            <MoreHorizontal className="w-3 h-3" />
          </button>
        </div>

        {comment.replies && comment.replies.length > 0 && (
          <div className="mt-2 pl-4 border-l border-kodo-steel/50">
            {comment.replies.map((reply) => (
              <CommentItem
                key={reply.id}
                comment={reply}
                onLike={onLike}
                onReply={onReply}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
};
