import React, { useEffect } from 'react';
import { useParams } from 'react-router';
import ComedianVideos from '../../components/atoms/comedian-videos';
import ComedianHeader from '../../components/atoms/comedian-header';
import Loading from '../../components/common/loading';
import useCocoApi from '../../hooks/fetch/request';
import useSetMetaOgDescription from '../../hooks/share/useSetMetaOgDescription';

export default function Comedian() {
  const { comedianId } = useParams();
  const [data = {}, error] = useCocoApi({
    path: `/use/comedians/${comedianId}`
  });
  const { videos, basic } = data;
  const title = basic?.name ? `${basic.name} on comedy collection` : '';
  useSetMetaOgDescription({ content: title, dependencies: [title] });

  useEffect(() => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }, []);

  if (!videos && !basic) return <Loading />;

  return (
    <>
      <ComedianHeader data={basic} />
      <ComedianVideos videos={videos} error={error} />
    </>
  );
}