import Link from "next/link";

export default function Article({
  title,
  date,
  content,
}: {
  title: string;
  date: string;
  content: string;
}) {
  return (
    <section className="py-10 lg:py-20 bg-gray-900">
      <div className="container mx-auto px-4">
        <div className="max-w-2xl mx-auto mb-12 text-center">
          <span className="text-base lg:text-xl text-gray-400">
            24 Janvier, 2024
          </span>
          <div className="mt-2">
            <h1 className="mb-6 text-4xl lg:text-5xl font-bold font-heading text-white">
              {title}
            </h1>
            {/* <div className='flex justify-center'>
                  <div className='mr-4'>
                    <img
                      className='w-12 h-12 object-cover object-top rounded-full'
                      src='https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80'
                      alt=''
                    />
                  </div>
                  <div className='text-left'>
                    <a href='#'>
                      <h3 className='text-gray-200 hover:text-gray-600 hover:underline font-bold'>
                        Alice Bradley
                      </h3>
                    </a>
                    <a href='#'>
                      <span className='text-xs text-green-600 font-bold'>
                        Author
                      </span>
                    </a>
                  </div>
                </div> */}
          </div>
          <div>
            <a
              className="uppercase text-base text-green-600 hover:text-green-700 hover:underline"
              href="#"
            >
              #Travel
            </a>
          </div>
        </div>
        <div className="max-w-2xl mx-auto prose">
          {content}
          {/* <p className='mb-6 leading-loose text-gray-200'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Praesent commodo est eget consequat imperdiet. Suspendisse
                laoreet scelerisque lobortis. Mauris facilisis hendrerit nulla
                at vehicula. Suspendisse potenti. Ut in nulla a purus bibendum
                convallis. Suspendisse id nunc maximus, suscipit ante ac,
                vulputate massa. Sed ut nunc suscipit, bibendum arcu a, interdum
                elit. Nullam laoreet mollis dictum. Ut suscipit, magna at
                elementum iaculis, erat erat fermentum justo, sit amet ultrices
                enim leo sit amet purus. Nulla sed erat molestie, auctor mauris
                lobortis, iaculis justo.
              </p>
              <p className='leading-loose text-gray-200'>
                Duis hendrerit dui in dui ornare luctus. Nullam gravida
                tincidunt lorem cursus suscipit. Integer scelerisque sem et sem
                porta, eu volutpat mi tempor. Duis interdum sodales lacus non
                tempor. Nam mattis, sapien a commodo ultrices, nunc orci
                tincidunt ante, tempus tempus turpis metus laoreet lacus.
                Praesent condimentum, arcu ut fringilla tincidunt, augue diam
                pretium augue, sit amet vestibulum nunc felis vel metus. Duis
                dolor nulla, pellentesque non ultrices ut, convallis eu felis.
                Duis luctus tempor arcu, vitae elementum massa porta non. Morbi
                aliquet, neque ut volutpat sodales, dui enim facilisis enim, ut
                dictum lacus neque in urna. Nam metus elit, ullamcorper pretium
                nisi at, aliquet gravida lectus. Nullam id lectus pellentesque,
                suscipit dolor eget, consequat velit. Pellentesque finibus
                commodo nisl, id interdum leo. Maecenas aliquam felis justo, ut
                sagittis nunc maximus ut.
              </p> */}
        </div>
      </div>
    </section>
  );
}
