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

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

const BooksList: React.FC<Props> = ({ books }) => {
  const [filter, setFilter] = useState('');

  return (
    <Paper>
      <TextField
        label="Liste filtern"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Titel</TableCell>
            <TableCell>Autor</TableCell>
            <TableCell>ISBN</TableCell>
            <TableCell>Bewertung</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {books
            .filter((book) =>
              book.title.toLowerCase().includes(filter.toLowerCase())
            )
            .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;
