import MediaQuery from 'react-responsive'

import { Book } from '../scripts/searcher';

import React from 'react';

import MobileDataList from './MobileDataList';
import DesktopDataList from './DesktopDataList';

import { MEDIA_QUERY_DESKTOP_STARTS, MEDIA_QUERY_MOBILE_ENDS } from '../constants/mediaquery';

export interface BooksViewProps {
  books: Book[];
}

const BooksView: React.FC<BooksViewProps> = ({ books }) => {

  return (
    <>
      <MediaQuery minWidth={MEDIA_QUERY_DESKTOP_STARTS}>
        <DesktopDataList books={books} />
      </MediaQuery>
      <MediaQuery maxWidth={MEDIA_QUERY_MOBILE_ENDS}>
        <MobileDataList books={books} />
      </MediaQuery>
    </>
  );
};

export default BooksView;