import { Stack } from '@chakra-ui/react';
import { createFileRoute } from '@tanstack/react-router';
import { BookSearchList } from '../components/BookSearchList';

export const Route = createFileRoute('/')({
  component: RouteComponent
});

function RouteComponent() {
  return (
    <Stack justifyContent="center" alignItems="center">
      <Stack width="90%">
        <BookSearchList />
      </Stack>
    </Stack>
  );
}

// const workingData1: WorkingCardProps = {
//   id: '1',
//   title: 'Worth the Candle',
//   description: `A teenager struggling after the death of his best friend finds himself in a fantasy
//               world - one which seems to be an amalgamation of every Dungeons and Dragons campaign
//               they ever played together. Now he's stuck trying to find the answers to why he's there
//               and what this world is trying to say. The most terrifying answer might be that this
//               world is an expression of the person he was back on Earth.`,
//   author: {
//     id: '1',
//     createdAt: '12.8.2025',
//     updatedAt: '4.9.2025',
//     username: 'AlexanderWhales'
//   },
//   progressStatus: WorkingProgressStatus.Finished,
//   updatedAt: '20.10.2025',
//   chaptersTotal: 10,
//   wordsTotal: 34000,
//   ratingTotal: 10,
//   reviewsTotal: 3
// };
//
// const workingData2: WorkingCardProps = {
//   id: '2',
//   title: 'Test',
//   description: `Description.`,
//   author: {
//     id: '1',
//     createdAt: '12.8.2025',
//     updatedAt: '4.9.2025',
//     username: 'JohnSmith'
//   },
//   progressStatus: WorkingProgressStatus.InProgress,
//   updatedAt: '20.10.2025',
//   chaptersTotal: 10,
//   wordsTotal: 1200,
//   ratingTotal: -10,
//   reviewsTotal: 0
// };
//
// const mockWorkingData = {
//   total: 4,
//   items: [workingData1, workingData2, { ...workingData1, id: '3' }, { ...workingData2, id: '4' }]
// };
//