import { FC } from 'react';

import Image from 'next/image';
// -------- custom hook -------- //
import useLightBox from 'hooks/useLightBox';
// -------- custom component -------- //
import Link from 'next/link';
import CustomMarkdown from '@/components/molecules/CustomMarkdown';
import ShareButton from '@/components/atoms/ShareButton';

// Define the props interface
interface BlogContentProps {
  topTitle: string;
  topContent: string;
  middleContent: string;
  blockQuote: string;
  lastTitle: string;
  lastContent: string;
  tags: { id: number; name: string; slug: string }[];

  galleryImages: { url: string; width: number; height: number }[];
}

const BlogContent: FC<BlogContentProps> = ({
  topTitle,
  topContent,
  middleContent,
  blockQuote,
  lastTitle,
  lastContent,
  tags,
  galleryImages
}) => {
  // used for image lightbox
  useLightBox();

  return (
    <div className="classic-view">
      <article className="post">
        <div className="post-content mb-5">
          <h2 className="tw-text-2xl md:tw-text-[32px] md:tw-leading-[32px] tw-text-secondary-dark tw-uppercase tw-font-semibold mb-4">
            {topTitle}
          </h2>

          <div className="base-text !tw-font-ibm !tw-text-secondary-dark">
            <CustomMarkdown content={topContent} />
          </div>

          <div className="row g-6 mt-3 mb-10">
            {galleryImages?.map(({ url, width, height }, key) => (
              <div key={key} className="col-md-6">
                <figure className="hover-scale rounded cursor-dark">
                  <a href={url} data-glightbox data-gallery="post">
                    <Image
                      width={width}
                      height={height}
                      src={url}
                      alt={'image'}
                      style={{ width: '100%', height: 'auto' }}
                    />
                  </a>
                </figure>
              </div>
            ))}
          </div>

          <div className="base-text !tw-font-ibm !tw-text-secondary-dark">
            <CustomMarkdown content={middleContent} />
          </div>

          <blockquote className="fs-lg my-8">
            <p className="base-text !tw-font-ibm !tw-text-secondary-dark">{blockQuote}</p>
          </blockquote>

          <h3 className="tw-text-2xl md:tw-text-[32px] md:tw-leading-[32px] tw-text-secondary-dark tw-uppercase tw-font-semibold mb-4">
            {lastTitle}
          </h3>

          <div className="base-text !tw-font-ibm !tw-text-secondary-dark">
            <CustomMarkdown content={lastContent} />
          </div>
        </div>

        <div className="mb-5 post-footer d-md-flex flex-md-row justify-content-md-between align-items-center mt-12">
          <div>
            <ul className="list-unstyled tag-list ">
              {tags?.map(({ id, name, slug }) => (
                <li key={id}>
                  <Link
                    href={'/blog?tag=' + slug}
                    className="tw-border tw-border-[#979797] tw-py-2 tw-text-xs md:tw-text-sm  tw-text-[#979797] hover:tw-text-main-color hover:tw-border-main-color tw-px-3  rounded-pill mb-0"
                  >
                    {name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="tw-mt-10 min-[992px]:tw-mt-0">
            <ShareButton />
            {/*<button
              className={` tw-border-2 w-9 h-9 tw-text-2xl hover:tw-opacity-50 tw-font-normal tw-border-main-color tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-main-color`}
            >
              <i className="uil uil-share-alt" />
            </button> */}
          </div>
        </div>
      </article>
    </div>
  );
};

export default BlogContent;