import { type BeforeInstallPromptEvent } from './useAddToHomeScreen';

type Props = {
  prompt: BeforeInstallPromptEvent | null;
};

const books = [
  {
    id: '1',
    title: 'JavaScript - das umfassende Handbuch',
    isbn: '978-3836286299',
  },
  {
    id: '2',
    title: 'Clean Code',
    isbn: '978-0132350884',
  },
  {
    id: '3',
    title: 'Design Patterns',
    isbn: '978-0201633610',
  },
];

const List: React.FC<Props> = ({ prompt }) => {
  const handleInstall = async () => {
    if (!prompt) return;

    await prompt.prompt();
    const result = await prompt.userChoice;

    console.log('User choice:', result.outcome);
  };

  return (
    <>
      {prompt && <button onClick={handleInstall}>App installieren</button>}

      <table>
        <thead>
          <tr>
            <th>Titel</th>
            <th>ISBN</th>
          </tr>
        </thead>
        <tbody>
          {books.map((book) => (
            <tr key={book.id}>
              <td>{book.title}</td>
              <td>{book.isbn}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
};

export default List;
