import React from 'react';

const ForumThread = () => {
  const posts = [
    {
      user: "SpringfieldConspiracist",
      avatar: "https://i.imgur.com/QF7Zp3E.png",
      content: "GUYS! I've uncovered the biggest cover-up since the Who Shot Mr. Burns case! Remember The Simpsons Movie in '07? There was a secret Habbo Hotel tie-in that disappeared faster than Homer's hair! We're talking blocky yellow avatars waddling around a pixelated Kwik-E-Mart!",
      likes: 87,
      replies: 12,
    },
    {
      user: "CouchPotatoApu",
      avatar: "https://i.imgur.com/XqwpWtL.png",
      content: "Thank you, come again with more details! I vaguely remember seeing a commercial for this during a Duff beer-induced haze. Didn't Apu have a catchphrase that kept crashing the server?",
      likes: 54,
      replies: 8,
    },
    {
      user: "MilhouseManiacs",
      avatar: "https://i.imgur.com/8Vn3tXZ.png",
      content: "OMG YES! My mom wouldn't let me play it because she thought Habbo Hotel was a real hotel and we couldn't afford a vacation. But I snuck onto my friend's computer and played it once. Thrillho was my username!",
      likes: 42,
      replies: 6,
    },
    {
      user: "KrustyApproved",
      avatar: "https://i.imgur.com/4Zx75US.png",
      content: "Hey hey, kids! I remember this disaster. They wanted me to do a voice-over for a commercial, but the script was so bad it made my normal show look like Shakespeare. It was something like 'Hey hey, Habbo-rinos! Come see my new Krusty-branded pixel pool! Don't forget to buy Krusty-O's!'",
      likes: 76,
      replies: 15,
    },
    {
      user: "LisaSaxophone",
      avatar: "https://i.imgur.com/L7rA7HJ.png",
      content: "I hate to be the voice of reason, but are we sure this actually existed? It sounds like a collective fever dream brought on by too many Squishees and late-night 'Itchy & Scratchy' marathons.",
      likes: 38,
      replies: 9,
    },{
      user: "BumblebeeMan_123",
      avatar: "https://i.imgur.com/Z9RKD3n.png",
      content: "Ay, ay, ay! No me gusta! I remember this game, it was more painful than a thousand stings! They made my character look like a yellow fire hydrant with a sombrero. ¡Qué desastre!",
      likes: 63,
      replies: 11,
    },
    {
      user: "RalphWiggum",
      avatar: "https://i.imgur.com/1XjhQVt.png",
      content: "One time, I went on Habbo Hotel and saw Principal Skinner. He told me to 'go to his room' but the game crashed. When I told my dad, he made funny phone calls all night!",
      likes: 95,
      replies: 20,
    },
  ];

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: '0 auto', backgroundColor: '#ffd533', padding: '20px', borderRadius: '10px' }}>
      <h1 style={{ color: '#d15229', textAlign: 'center', fontWeight: 'bold', textShadow: '2px 2px #ffa500' }}>The Simpsons' Lost Habbo Hotel: Pixel Springfield</h1>
      {posts.map((post, index) => (
        <div key={index} style={{ backgroundColor: 'white', margin: '10px 0', padding: '15px', borderRadius: '5px', boxShadow: '0 4px 8px rgba(0,0,0,0.2)' }}>
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
            <img src={post.avatar} alt={post.user} style={{ width: '50px', height: '50px', borderRadius: '50%', marginRight: '10px', border: '2px solid #3a87c4' }} />
            <strong style={{ color: '#3a87c4' }}>{post.user}</strong>
          </div>
          <p style={{ fontSize: '14px', lineHeight: '1.6' }}>{post.content}</p>
          <div style={{ color: '#888', fontSize: '0.9em', marginTop: '10px' }}>
            Likes: {post.likes} | Replies: {post.replies}
          </div>
        </div>
      ))}
    </div>
  );
};

export default ForumThread;