'use client';

/**
 * 댓글 섹션 컴포넌트
 *
 * 디자인 스펙 기준:
 * - 댓글 등록 Textarea + 버튼
 * - 댓글 수 표시 ("댓글 N")
 * - 댓글 목록
 */

import { useState, useCallback } from 'react';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { CommentItem } from './CommentItem';
import type { Comment } from '../types';

interface CommentSectionProps {
  postId: string;
  comments: Comment[];
  currentUserId: string;
  onAddComment: (content: string) => void;
  onUpdateComment: (id: string, content: string) => void;
  onDeleteComment: (id: string) => void;
}

export function CommentSection({
  postId: _postId,
  comments,
  currentUserId,
  onAddComment,
  onUpdateComment,
  onDeleteComment,
}: CommentSectionProps) {
  const [newComment, setNewComment] = useState('');

  // 댓글 등록 핸들러
  const handleSubmit = useCallback(() => {
    if (newComment.trim()) {
      onAddComment(newComment.trim());
      setNewComment('');
    }
  }, [newComment, onAddComment]);

  return (
    <div className="space-y-6">
      {/* 댓글 등록 */}
      <div className="space-y-3">
        <h3 className="text-lg font-semibold flex items-center gap-2">
          <span className="w-2 h-2 bg-red-500 rounded-full" />
          댓글 등록
        </h3>
        <Textarea
          value={newComment}
          onChange={(e) => setNewComment(e.target.value)}
          placeholder="댓글을 입력해주세요"
          className="min-h-[100px]"
        />
        <div className="flex justify-end">
          <Button onClick={handleSubmit}>등록</Button>
        </div>
      </div>

      {/* 댓글 목록 */}
      {comments.length > 0 && (
        <div className="space-y-3">
          <h3 className="text-lg font-semibold flex items-center gap-2">
            <span className="w-2 h-2 bg-red-500 rounded-full" />
            댓글 {comments.length}
          </h3>
          <div className="bg-white rounded-lg border border-gray-200">
            <div className="p-4">
              {comments.map((comment) => (
                <CommentItem
                  key={comment.id}
                  comment={comment}
                  currentUserId={currentUserId}
                  onUpdate={onUpdateComment}
                  onDelete={onDeleteComment}
                />
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default CommentSection;