import {FunctionComponent} from 'react'
import {ChevronLeft} from 'lucide-react'

const DetailPage: FunctionComponent = () => {
  return (
    <div className="detail-page">
      <h1>NAME</h1>
      <p className="metadata subtitle">TYPE | CATEGORY | GLASS</p>

      <p>INSTRUCTIONS</p>

      <p>
        <strong>Ingredients</strong>
      </p>

      <div className="ingredients">
        {/* Start ingrediënten input, zet dit in een lus.  */}
        <div className="ingredient-input">
          <input />
          <input />
        </div>
      </div>
      {/* Einde ingrediënten input. */}

      <button className="back-button">
        <ChevronLeft /> Back to Home
      </button>
    </div>
  )
}

export default DetailPage
