import {FunctionComponent} from 'react'
import type {IDrink} from '../../models/IDrink.ts'
import {ChevronRight, Wine, WineOff} from 'lucide-react'

const Drink: FunctionComponent<IDrink> = ({type, glass, image, category, name}) => {
  return (
    <div className="drink-card">
      <div className="image-container">
        <img src={image} alt={name} />
      </div>
      <div className="drink-card-content">
        <div className="title">
          <p>{name}</p>
          <span className="icon">{type === 'Alcoholic' ? <Wine /> : <WineOff />}</span>
        </div>
        <p className="metadata">{category}</p>
        <p className="metadata">{glass}</p>
        <div className="drink-detail-link">
          {/* Zorg dat dit een link wordt naar de detailpagina. */}
          <ChevronRight />
        </div>
      </div>
    </div>
  )
}

export default Drink
