/* eslint-disable */
import * as React from 'react';
// import { useCookies } from "react-cookie";
// import { useNavigate } from 'react-router-dom';
// import { useTranslation } from 'react-i18next';

import './footer.scss';
// import clock from "../../Assets/footer/clock.svg";
import envelope from './../../static/footer/envelope.svg';
import facebook from './../../static/footer/facebook.svg';
import faq from './../../static/footer/faq_icon.svg';
import footerLogo from './../../static/footer/footerLogo.svg';
import instagram from './../../static/footer/instagram.svg';
import line from './../../static/footer/line.svg';

export const Footer: React.FC = () => {
  //   const navigate = useNavigate();
  // const { t } = useTranslation();
  const [inc, setInc] = React.useState(0);

  // const [cookies] = useCookies();

  return (
    <>
      <div className='outer__footer__container'>
        <footer className='footer'>
          <div className='layout_container'>
            <div className='footer__container'>
              <div className='footer__icon'>
                <img
                  className='footer__logo'
                  src={footerLogo}
                  alt='Buddy Fresh'
                />
                <span className='footer__copyright'>
                  ©{' '}
                  {`${new Date().getFullYear()} 
                 
                  `}
                  {/* ${t(
                    'Buddy_Fresh_ All_rights_reserved'
                  )} */}
                </span>
              </div>
              <div className='footer__menu'>
                <section className='footer__menu__items'>
                  <header>{'PRODUCTS'}</header>
                  <span
                    onClick={(): void => {
                      //   navigate('/recipe');
                    }}
                  >
                    {'Recipe'}
                  </span>
                  <span
                    onClick={(): void => {
                      //   navigate('/our-process');
                    }}
                  >
                    {/* {t('How It Works')} */}
                  </span>
                  <span
                    onClick={(): void => {
                      //   navigate('/our-story', { state: { nav: '' } });
                    }}
                  >
                    {'Our_story'}
                  </span>
                </section>
                <section className='footer__menu__items'>
                  <header>{'ABOUT'}</header>
                  {/* <header>{t('ABOUT')}</header> */}
                  <span
                    onClick={(): void => {
                      //   navigate('/privacy-policy', {
                      //     state: { nav: 'privacy' },
                      //   });
                    }}
                  >
                    Policies
                  </span>
                  <span
                    onClick={(): void => {
                      //   navigate('/terms-of-use', { state: { nav: 'terms' } });
                    }}
                  >
                    Terms of Service
                  </span>
                  <span
                    onClick={(): void => {
                      //   navigate('/cookies-policy', {
                      //     state: { nav: 'cookies' },
                      //   });
                    }}
                  >
                    Cookie Policy
                  </span>
                </section>
                <section className='footer__menu__items'>
                  <header>{'FOLLOW_US'}</header>
                  {/* <header>{t('FOLLOW_US')}</header> */}
                  <div>
                    <a
                      className='ext__link'
                      href='https://www.facebook.com/Buddy-Fresh-106910708915237'
                      target='_blank'
                      rel='noopener noreferrer'
                    >
                      <img
                        src={facebook}
                        alt='Facebook'
                      />
                      <span>{'Facebook_page'}</span>
                    </a>
                  </div>
                  <div>
                    <a
                      className='ext__link'
                      href='https://www.instagram.com/buddyfresh.now/'
                      target='_blank'
                      rel='noopener noreferrer'
                    >
                      <img
                        src={instagram}
                        alt='instagram'
                      />
                      <span>{'Instagram'}</span>
                    </a>
                  </div>
                  <div>
                    <a
                      className='ext__link'
                      href='https://liff.line.me/1645278921-kWRPP32q/?accountId=356gosom'
                      target='_blank'
                      rel='noopener noreferrer'
                    >
                      <img
                        src={line}
                        alt='line'
                      />
                      <span>{'Line_official'}</span>
                    </a>
                  </div>
                </section>
                <section
                  className='footer__menu__items'
                  style={{ marginBottom: '32px' }}
                >
                  <header>{'SUPPORT'}</header>
                  <div>
                    <img
                      src={faq}
                      alt='FAQs'
                    />
                    <span
                      onClick={(): void => {
                        setInc(inc + 1);
                        if (window.location.pathname === '/our-story') {
                          //   navigate('/our-story', {
                          //     state: { nav: 'faq' + inc },
                          //   });
                        } else {
                          //   navigate('/our-story', { state: { nav: 'faqs' } });
                        }
                      }}
                    >
                      FAQs
                    </span>
                  </div>
                  <div>
                    <img
                      src={envelope}
                      alt='Contact us'
                    />
                    <span
                      onClick={(): void => {
                        if (window.location.pathname === '/our-story') {
                          //   navigate('/our-story', { state: { nav: 'contact' } });
                        } else {
                          //   navigate('/our-story', {
                          //     state: { nav: 'contact_us' },
                          //   });
                        }
                      }}
                    >
                      Contact us
                    </span>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </>
  );
};
