import {FunctionComponent} from 'react'
import LoadingPart from '../../components/loadingPart.tsx'

const HomePage: FunctionComponent = () => {
  return (
    <div>
      <h1>Drinks</h1>

      <div className="filters">
        <div className="form-element">
          <label htmlFor="drink-type-filter">Type:</label>
          <select id="drink-type-filter">
            <option value="All">All</option>
            <option value="Alcoholic">Alcoholic</option>
            <option value="Non alcoholic">Non alcoholic</option>
          </select>
        </div>
        <div className="form-element">
          <label htmlFor="drink-name-filter">Name:</label>
          <input id="drink-name-filter" type="text" placeholder="Filter drinks by name" />
        </div>
      </div>

      <div className="delete-drinks">
        <div>
          <strong># GESELECTEERDE DRINKS</strong> drinks selected
        </div>
        <button className="delete-button">Clear selection</button>
        <button className="delete-button">
          <LoadingPart /> Delete selection
        </button>
      </div>

      <div className="drinks-container">{/* Render de Drink componenten hier. */}</div>
    </div>
  )
}

export default HomePage
