import { useState } from 'react'
import { MessageSquare, Send } from 'lucide-react'

export default function CommentSection({ data, onUpdate }) {
  const [comments, setComments] = useState(data?.comments || [])
  const [newComment, setNewComment] = useState('')

  const handleSubmit = (e) => {
    e.preventDefault()
    if (newComment.trim()) {
      const comment = {
        id: Date.now(),
        text: newComment,
        author: 'You',
        timestamp: new Date().toLocaleTimeString()
      }
      setComments(prev => [...prev, comment])
      setNewComment('')
    }
  }

  return (
    <div className="bg-gray-50 border border-gray-200 rounded-lg p-6 my-6">
      <div className="flex items-center space-x-2 mb-4">
        <MessageSquare className="h-5 w-5 text-gray-600" />
        <h3 className="text-lg font-semibold text-gray-900">Comments & Notes</h3>
      </div>

      <div className="space-y-4 mb-6">
        {comments.map((comment) => (
          <div key={comment.id} className="bg-white p-4 rounded-lg border">
            <p className="text-gray-700">{comment.text}</p>
            <div className="flex items-center justify-between mt-2 text-sm text-gray-500">
            <span>{comment.author}</span>
            <span>{comment.timestamp}</span>
          </div>
        ))}
        
        {comments.length === 0 && (
          <p className="text-gray-500 text-center py-4">No comments yet. Be the first to share your thoughts!</p>
        )}
      </div>

      <form onSubmit={handleSubmit} className="flex space-x-3">
        <input
          type="text"
          value={newComment}
          onChange={(e) => setNewComment(e.target.value)}
          placeholder="Add a comment or note..."
          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        />
        <button
          type="submit"
          disabled={!newComment.trim()}
          className="bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
        >
          <Send className="h-4 w-4" />
        </button>
      </form>
    </div>
  )
}