la-huasca-ts/src/components/LikeButton.tsx

'use client';

import { useEffect, useState } from 'react';

interface LikeButtonProps {
  roomId: number;
}

export default function LikeButton({ roomId }: LikeButtonProps) {
  const [liked, setLiked] = useState(false);
  const [totalLikes, setTotalLikes] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/api/rooms/${roomId}/likes`)
      .then(res => res.json())
      .then(data => {
        setLiked(data.likedByUser);
        setTotalLikes(data.totalLikes);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, [roomId]);

  const toggleLike = async () => {
    try {
      const res = await fetch(`/api/rooms/${roomId}/likes`, { method: 'POST' });
      if (res.ok) {
        const data = await res.json();
        setLiked(data.liked);
        setTotalLikes(data.totalLikes);
      }
    } catch (err) {
      console.error('Failed to toggle like:', err);
    }
  };

  if (loading) {
    return (
      <div style={{ 
        display: 'flex', 
        alignItems: 'center', 
        gap: '0.35rem',
        padding: '0.4rem 0.75rem',
        background: 'rgba(0,0,0,0.04)',
        borderRadius: '999px',
        fontSize: '13px',
        color: '#666'
      }}>
        ...
      </div>
    );
  }

  return (
    <button
      onClick={toggleLike}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '0.35rem',
        padding: '0.4rem 0.75rem',
        background: liked ? '#fee2e2' : 'rgba(0,0,0,0.04)',
        border: 'none',
        borderRadius: '999px',
        cursor: 'pointer',
        fontSize: '13px',
        fontWeight: 500,
        color: liked ? '#dc2626' : '#666',
        transition: 'all 0.2s ease',
      }}
      title={liked ? 'Unlike this room' : 'Like this room'}
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill={liked ? 'currentColor' : 'none'}
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
      </svg>
      {totalLikes > 0 && <span>{totalLikes}</span>}
    </button>
  );
}