/**
 * Check-in Responses App - View responses to a specific check-in question
 */

import React, { useState } from 'react';

export function CheckinResponses({ questionId }: { questionId?: number }) {
  const [responses] = useState([
    { id: 1, person: 'Alice Johnson', content: 'Worked on the homepage mockups and navigation design. Made good progress!', created_at: '2024-01-15 5:30 PM' },
    { id: 2, person: 'Bob Smith', content: 'Implemented the responsive grid system and started on the component library.', created_at: '2024-01-15 5:15 PM' },
    { id: 3, person: 'Charlie Davis', content: 'Finalized content for the About page and started on case studies.', created_at: '2024-01-15 5:45 PM' },
  ]);

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif', maxWidth: '800px' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '10px' }}>What did you work on today?</h1>
      <p style={{ color: '#666', marginBottom: '30px' }}>January 15, 2024 • {responses.length} responses</p>
      
      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
        {responses.map(response => (
          <div key={response.id} style={{ 
            border: '1px solid #ddd', 
            borderRadius: '8px', 
            padding: '20px', 
            background: 'white'
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
              <span style={{ fontWeight: 'bold', fontSize: '16px' }}>{response.person}</span>
              <span style={{ fontSize: '12px', color: '#999' }}>{response.created_at}</span>
            </div>
            <div style={{ lineHeight: '1.6' }}>{response.content}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
