import {
  Paper,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@mui/material';
import { StarBorder, Star } from '@mui/icons-material';
import { type Book } from './Book';

type Props = {
  books: Book[];
};

const BooksList: React.FC<Props> = ({ books }) => {
  return (
    <Paper>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Titel</TableCell>
            <TableCell>Autor</TableCell>
            <TableCell>ISBN</TableCell>
            <TableCell>Bewertung</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {books.map((book) => (
            <TableRow key={book.id}>
              <TableCell>{book.title}</TableCell>
              <TableCell>{book.author}</TableCell>
              <TableCell>{book.isbn}</TableCell>
              <TableCell>
                {Array(5)
                  .fill('')
                  .map((_, index) =>
                    book.rating <= index ? (
                      <StarBorder key={index} />
                    ) : (
                      <Star key={index} />
                    )
                  )}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
};

export default BooksList;
