import React, { useState } from 'react';
import Message from '../Message';
import  Input  from '../Input';
import Button  from '../Button';

export const ChatInterface: React.FC = () => {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([
    { id: 1, text: '¡Hola! ¿En qué puedo ayudarte?', isOwn: false, timestamp: '10:00' },
    { id: 2, text: 'Me gustaría información sobre mis inversiones', isOwn: true, timestamp: '10:01' },
  ]);

  const sendMessage = () => {
    if (message.trim()) {
      setMessages([
        ...messages,
        {
          id: messages.length + 1,
          text: message,
          isOwn: true,
          timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
        }
      ]);
      setMessage('');
    }
  };

  return (
    <div className="flex flex-col h-full bg-maya-background rounded-lg border border-gray-200">
      {/* Chat Header */}
      <div className="bg-white px-4 py-3 border-b border-gray-200 rounded-t-lg">
        <div className="flex items-center space-x-3">
          <div className="w-3 h-3 bg-maya-primary rounded-full"></div>
          <h3 className="font-semibold text-gray-800">Soporte Banorte</h3>
          <div className="w-2 h-2 bg-maya-success rounded-full"></div>
        </div>
      </div>

      {/* Messages Area */}
      <div className="flex-1 p-4 overflow-y-auto">
        {messages.map((msg) => (
          <Message
            key={msg.id}
            text={msg.text}
            isOwn={msg.isOwn}
            timestamp={msg.timestamp}
          />
        ))}
      </div>

      {/* Input Area */}
      <div className="bg-white p-4 border-t border-gray-200 rounded-b-lg">
        <div className="flex space-x-2">
          <Input
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="Escribe tu mensaje..."
            className="flex-1"
            onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
          />
          <Button onClick={sendMessage} variant="primary">
            Enviar
          </Button>
        </div>
      </div>
    </div>
  );
};

export default ChatInterface