import Link from 'next/link';
import NextLink from 'next/link';
import { Fragment } from 'react';

interface TitleBannerProps {
  categoryLink: string;
  categoryTitle: string;
  title: string;
  date: string;
}

const TitleBanner: React.FC<TitleBannerProps> = ({ categoryLink, categoryTitle, title, date }) => {
  return (
    <section className="wrapper tw-bg-light-gray/[50%]">
      <div className="container pt-10 pb-19 pt-md-14 pb-md-20 text-center">
        <div className="row">
          <div className="col-md-10 col-xl-8 mx-auto">
            <div className="post-header">
              <div className="post-category ">
                <Link
                  href={categoryLink}
                  className="hover tw-text-main-color tw-font-ibm tw-uppercase tw-text-xs md:tw-text-sm tw-font-semibold"
                >
                  · {categoryTitle}
                </Link>
              </div>

              <h1 className="tw-font-ibm tw-font-normal tw-text-3xl md:tw-text-[40px] tw-text-secondary-dark  md:tw-leading-tight mb-4">
                {title}
              </h1>

              <ul className="post-meta mb-5 mt-10">
                <li className="tw-text-main-dark tw-font-inter tw-font-semibold tw-text-xs  md:tw-text-sm tw-uppercase">
                  <i className="uil uil-calendar-alt" />
                  <span>{date}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default TitleBanner;