/**
 * Message Board App - List of all messages in a project
 */

import React, { useState, useEffect } from 'react';

export function MessageBoard({ projectId }: { projectId?: number }) {
  const [messages, setMessages] = useState<any[]>([]);

  useEffect(() => {
    setMessages([
      { id: 1, subject: 'Project Kickoff', content: 'Welcome to the Website Redesign project!', creator: 'Alice', created_at: '2024-01-10', comments_count: 5 },
      { id: 2, subject: 'Design Direction', content: 'Let\'s discuss the overall design direction...', creator: 'Bob', created_at: '2024-01-12', comments_count: 12 },
      { id: 3, subject: 'Timeline Update', content: 'Updated timeline for Q1 deliverables', creator: 'Charlie', created_at: '2024-01-15', comments_count: 3 },
    ]);
  }, [projectId]);

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
        <h1 style={{ fontSize: '24px', margin: 0 }}>Message Board</h1>
        <button style={{ padding: '10px 20px', background: '#1d8cf8', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          New Message
        </button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        {messages.map((message) => (
          <div key={message.id} style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '16px', background: 'white', cursor: 'pointer' }}>
            <h3 style={{ fontSize: '18px', marginBottom: '8px' }}>{message.subject}</h3>
            <p style={{ color: '#666', marginBottom: '12px' }}>{message.content}</p>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', color: '#999' }}>
              <span>{message.creator} • {message.created_at}</span>
              <span>{message.comments_count} comments</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
