import * as React from 'react';

import { ContentCategory } from './ContentCategory';
import { ContentCategories } from './ContentCategories';
import { ContentService } from './ContentService';
import { ContentData } from './extractContentData';

export type ContentProps = {
  data: ContentData;
};

const Container = ({ children }: { children: React.ReactNode }) => <div className="uc-p-4">{children}</div>;

export const Content = ({ data }: ContentProps): JSX.Element => {
  const { service, category, categories } = data;
  if (service) {
    return (
      <Container>
        <ContentService service={service} />
      </Container>
    );
  }
  if (category) {
    return <ContentCategory category={category} />;
  }
  if (categories) {
    return <ContentCategories categories={categories} />;
  }
  return <Container>No results found!</Container>;
};

export default Content;