import React from 'react';
import { SitesmithMessage } from '../../types/sitesmith';

export const MessageList: React.FC<{ messages: SitesmithMessage[] }> = ({ messages }) => {
  const extract = (m: SitesmithMessage): string => {
    if (m.role === 'user') return m.content;
    try { const obj = JSON.parse(m.content); if (obj.type === 'ask') return obj.question; if (obj.message) return obj.message; } catch {}
    return m.content;
  };
  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {messages.length === 0 && (
        <div style={{ color: '#71717a', fontSize: 13, textAlign: 'center', padding: 30 }}>
          Describe the site you want and Sitesmith builds it. e.g. "A two-page site for a small bakery, friendly tone, photo of cupcakes in the hero."
        </div>
      )}
      {messages.map((m, i) => {
        const isUser = m.role === 'user';
        return (
          <div key={i} style={{
            alignSelf: isUser ? 'flex-end' : 'flex-start',
            maxWidth: '80%', padding: '10px 14px', borderRadius: 10,
            background: isUser ? '#312e81' : '#1f2937', color: '#f3f4f6',
            fontSize: 14, whiteSpace: 'pre-wrap',
          }}>
            {extract(m)}
          </div>
        );
      })}
    </div>
  );
};