import { FC } from 'react';
import Counter from '@/components/atoms/Counter';
import { useTranslation } from 'next-i18next';
import classNames from 'classnames';
// -------- data -------- //
interface FactsProps {
  background?: string;
  title?: string;
  preTitle?: string;
  text?: string;
  facts?: any[]
}

const Facts: React.FC<FactsProps> = ({ background = 'tw-bg-main-light', title, preTitle, text, facts }) => {
  const { t } = useTranslation('common');
  const factsData = facts && Array?.isArray(facts) && facts?.length ? facts : [
    {
      amount: 15,
      text: t('common:facts.item1'),
      prefix: "+"
    }, {
      amount: 75,
      text: t('common:facts.item2'),
      prefix: "+"
    },
    {
      amount: 100,
      sufix: 'mil',
      text: t('common:facts.item3'),
      prefix: "+",
    },
    {
      amount: 45,
      text: t('common:facts.item4'),
    }
  ]
  return (
    <div className={classNames('tw-bg-cover tw-bg-no-repeat ', background)}>
      <div className="container">
        <div className="row my-0 py-7 py-md-14 gx-7  gy-7 gy-md-2">
          <div className="col-12 col-md-10 col-lg-5 offset-md-1 mb-6 text-start text-md-start">
            <h2 className=" tw-text-base md:tw-text-xl  tw-text-main-color tw-font-ibm tw-font-semibold  tw-uppercase text-center text-md-start">
              {preTitle || t('common:facts.preTitle')}
            </h2>
            <h2 className="text-center text-md-start  tw-text-3xl md:tw-text-5xl tw-font-normal tw-text-main-color tw-font-ibm tw-py-4">
              {title || t('common:facts.title')}
            </h2>
            <p className="base-text text-center text-md-start"> {text || t('common:facts.text')}</p>
          </div>
          <div className="col-12 col-md-10 offset-md-1 offset-lg-0 col-lg-5 ">
            <div className="tw-grid tw-grid-cols-2 tw-gap-4 ">
              {
                factsData?.map((item, key) => {
                  return <div key={key} className={classNames("tw-rounded-lg tw-border tw-border-main-color  tw-h-max tw-p-4 text-center", { "tw-min-h-[132px] tw-grid tw-items-center": key === 1 || key === 2 }, {
                    "tw-mt-auto ": key === 3
                  })}>
                    <Counter
                      numberColor="tw-text-main-color"
                      textColor="tw-text-secondary-dark"
                      number={item?.amount || 0}
                      title={item?.text || ""}
                      prefix={item?.prefix || ""}
                      sufix={item?.sufix || ""}
                    />
                  </div>
                })
              }
            </div>
            {/* <div className="tw-grid tw-grid-cols-2 tw-gap-4 ">
              <div className="tw-rounded-lg tw-border tw-border-main-color  tw-h-max tw-p-4 text-center">
                <Counter
                  numberColor="tw-text-main-color"
                  textColor="tw-text-secondary-dark"
                  number={7}
                  title={t('common:facts.item1')}
                />
              </div>
              <div className="tw-min-h-[132px] tw-rounded-lg tw-border tw-border-main-color  tw-h-max tw-p-4 text-center">
                <Counter
                  numberColor="tw-text-main-color"
                  textColor="tw-text-secondary-dark"
                  number={30}
                  title={t('common:facts.item2')}
                  prefix="+"
                />
              </div>
              <div className="tw-min-h-[132px]  tw-grid tw-items-center tw-rounded-lg tw-border tw-border-main-color  tw-h-max tw-p-4 text-center">
                <Counter
                  numberColor="tw-text-main-color"
                  textColor="tw-text-secondary-dark"
                  number={6000}
                  title={t('common:facts.item3')}
                  prefix="+"
                />
              </div>
              <div className="tw-mt-auto tw-rounded-lg tw-border tw-border-main-color  tw-h-max tw-p-4 text-center">
                <Counter
                  numberColor="tw-text-main-color"
                  textColor="tw-text-secondary-dark"
                  number={90}
                  sufix={'%'}
                  title={t('common:facts.item4')}
                />
              </div>
            </div> */ }
          </div>
        </div>
      </div>
    </div>
  );
};

export default Facts;