import { useEffect, useState } from 'react';
import { withTranslation } from 'react-i18next';
import AboutUs from './components/AboutUs';
import ArticleCardsList from './components/ArticleCardsList';
import FeedbackForm from './components/FeedbackForm';
import Statistics from './components/Statistics';
import Welcome from './components/Welcome';

const articleCardsMock = [
  {
    id: '123',
    title: 'Lorem ipsum dolor sit amet ornare amet consequat ultricies auctor.',
    description:
      'Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placerat mus. Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placmeget rhoncus ut settrnhg ips...',
    image:
      'https://images.unsplash.com/photo-1664575602276-acd073f104c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
    updated: '12.12.2022',
  },
  {
    id: '234',
    title: 'Lorem ipsum dolor sit amet ornare amet consequat us auctoit amet orare ametr...',
    description:
      'Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncusnon eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placerat mus.',
    image:
      'https://images.unsplash.com/photo-1664575602276-acd073f104c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
    updated: '12.12.2022',
  },
  {
    id: '345',
    title: 'Lorem ipsum dolor sit amet ornare amet consequat ultricies auctor.',
    description:
      'Lorem ipsum dolor sit amet consectetur. Quam molestie non eget rhoncus ut sed. Egestas scelerisque fames lorem id luctus viverra ligula placerat mus. Lorem ipsum dolor sit amet consectetur. Quames lorem id luctus viverra ligula placerat mus.',
    image:
      'https://images.unsplash.com/photo-1664575602276-acd073f104c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
    updated: '12.12.2022',
  },
];

function Home({ t }) {
  const [servicesCards, setServicesCards] = useState([]);
  const [blogCards, setBlogCards] = useState([]);

  useEffect(() => {
    setServicesCards(articleCardsMock);
    setBlogCards(articleCardsMock);
  }, []);

  return (
    <div className="w-full bg-primary-main">
      <Welcome />
      <div className="max-w-8xl w-full px-10 mx-auto">
        <Statistics />
        <AboutUs />
        <ArticleCardsList title={t('services_title')} cards={servicesCards} className="mb-20" />
        <ArticleCardsList
          title={t('blog_title')}
          cards={blogCards}
          id="blog"
          className="pt-72 mb-28"
        />
        <FeedbackForm />
      </div>
    </div>
  );
}

export default withTranslation('homePage')(Home);
