import React from 'react';
import Loading from '../../components/common/loading';
import CarouselImages from '../../components/complex/carousel-images';
import SliderCards from '../../components/complex/slider-cards';
import useRecommendations from '../../hooks/recommendations/useRecommendations';
import useSetMetaOgDescription from '../../hooks/share/useSetMetaOgDescription';

import './index.scss';

export default function Home() {
  const title =
    'Enjoy the videos of comedians you love, and share it all with friends, family and people who need the dose of humour in their life.';
  const [data = {}, error, loading] = useRecommendations();
  const { carousel, trending, popular, latest, marvelous, lengthy, multistarrer } = data;
  useSetMetaOgDescription({ content: title });

  if (loading) return <Loading />;

  return (
    <>
      <CarouselImages data={carousel}></CarouselImages>
      <hr className="hr-first" />
      <SliderCards category={'popular'} offscreen={true} data={popular}></SliderCards>
      <hr />
      <SliderCards category={'trending'} offscreen={false} data={trending}></SliderCards>
      <hr />
      <SliderCards category={'latest'} offscreen={true} data={latest}></SliderCards>
      <hr />
      <SliderCards category={'marvelous'} offscreen={true} data={marvelous}></SliderCards>
      <hr />
      <SliderCards category={'lengthy'} offscreen={true} data={lengthy}></SliderCards>
      <hr />
      <SliderCards category={'multistarrer'} offscreen={true} data={multistarrer}></SliderCards>
    </>
  );
}