import React from "react";

const ArticleContent = () => {
  return (
    <article className="bg-white p-8 rounded-lg shadow">
      <h2 className="text-4xl font-semibold mb-4">Article Title</h2>
      <div className="flex items-center mb-4">
        <div className="mr-4">
          <img
            src="https://source.unsplash.com/random/100x100?person"
            alt="Author"
            className="rounded-full w-16 h-16 object-cover"
          />
        </div>
        <div>
          <p className="text-lg font-medium">Author Name</p>
          <p className="text-gray-600">Published on July 25, 2024</p>
        </div>
      </div>
      <img
        src="https://source.unsplash.com/random/1200x600?news,main"
        alt="Article Image"
        className="article-image mb-4"
      />
      <div className="prose max-w-none">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          quis justo id neque pharetra vestibulum. Nulla facilisi. Duis ac
          sollicitudin eros. Aenean euismod facilisis ante, sed malesuada ligula
          facilisis sit amet. Aliquam erat volutpat. Integer sagittis metus ac
          nibh porttitor, id bibendum metus interdum.
        </p>
        <p>
          Curabitur id dolor tincidunt, fermentum massa non, lacinia ipsum.
          Phasellus consequat, lacus non gravida venenatis, tortor erat dictum
          est, a interdum leo est non odio. Donec sit amet tortor vel nisl
          bibendum vehicula. Mauris bibendum convallis lectus, id accumsan nulla
          facilisis sit amet.
        </p>
        <p>
          Aliquam erat volutpat. Quisque vel odio in magna vehicula faucibus.
          Etiam ut dapibus erat. Praesent sit amet nisl non lectus placerat
          consectetur.
        </p>
      </div>
    </article>
  );
};

export default ArticleContent;
