import * as React from "react";
import { memo } from "react";
import EmbedPannels from "../../../components/embed-panels";
import { Page } from "../../../components/page";
import { ChannelItem } from "../../../components/channel";
import { VideoItem } from "../../../components/video/video";

type ContentSectionProps = {
  currentChannel: ChannelItem;
  onChangeChannel: (channel: ChannelItem) => void;
  onVideoPress: (video: VideoItem) => void;
  video: any;
};

function ContentSection({
  currentChannel,
  onChangeChannel,
  onVideoPress,
  video,
}: ContentSectionProps) {
  const sidebar = currentChannel?.renderers?.sidebar;
  const slug = currentChannel.slug;
  return sidebar && video ? (
    <EmbedPannels channelSlug={slug} />
  ) : (
    <Page
      key={currentChannel._id}
      id={currentChannel._id}
      onChangeChannel={onChangeChannel}
      onVideoPress={onVideoPress}
    />
  );
}

export default memo(ContentSection);