import React from 'react';

import classNames from 'classnames';

import { useTranslation } from 'next-i18next';
import Link from 'next/link';
import Image from 'next/image';

interface ToBePartProps {
  title?: string;
  preTitle?: string;
  text?: string;
  ctaText?: string;
  ctaHref?: string;
  textBottom?: string;
  imageUrl?: string;
}

const ToBePart: React.FC<ToBePartProps> = ({ title, preTitle, text, ctaText, ctaHref, textBottom, imageUrl }) => {
  const { t } = useTranslation(['common']);
  return (
    <div className={classNames('wrapper  ')}>
      <div className="container py-7 py-md-14">
        <div className="row   gy-1">
          <div className="col-span-12  col-lg-10 offset-lg-1">
            <div className="tw-w-full tw-grid tw-grid-cols-1 min-[768px]:tw-grid-cols-2 tw-items-center tw-border tw-border-main-color ">
              <div className="tw-h-full">
                {(imageUrl && (
                  <Image
                    src={imageUrl}
                    width={455}
                    height={492}
                    alt={title || 'to be part'}
                    className="tw-w-full tw-h-full tw-object-cover"
                  />
                )) ||
                  ''}{' '}
              </div>
              <div className="tw-p-7 min-[992px]:tw-pr-14 max-[991px]:tw-text-center">
                {' '}
                {preTitle && <p className="base-pretitle mb-2">{preTitle}</p>}{' '}
                {title && <h2 className="base-title !tw-text-main-color mb-4">{title}</h2>}
                {text && <p className="base-text ">{text}</p>}
                {textBottom && <p className="base-text ">{textBottom}</p>}
                {ctaHref && (
                  <Link
                    href={ctaHref}
                    className="tw-font-ibm tw-text-sm tw-uppercase tw-font-bold tw-px-6 tw-py-3 tw-rounded tw-block tw-w-max tw-mt-7 tw-text-white tw-bg-main-color max-[991px]:tw-mx-auto"
                  >
                    {ctaText}
                  </Link>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ToBePart;