import { Card, List, Text } from '@chakra-ui/react';
import { WorkingListCard } from './WorkingListCard';
import { BookOne } from '../interfaces';

export function WorkingList({ workingsList }: { workingsList: BookOne[] }) {
  return (
    <List.Root variant="plain" gap={4}>
      {workingsList.length !== 0 ? (
        workingsList.map(workingData => (
          <List.Item key={workingData.id}>
            <WorkingListCard {...workingData} />
          </List.Item>
        ))
      ) : (
        <List.Item>
          <Card.Root
            variant="outline"
            width="100%"
            padding={4}
            justifyContent="center"
            alignItems={'center'}
          >
            <Text fontSize="md">Nothing is here yet!</Text>
          </Card.Root>
        </List.Item>
      )}
    </List.Root>
  );
}