import {FunctionComponent, useContext} from 'react'
import type {IDrink} from '../../models/IDrink.ts'
import {ChevronRight, Wine, WineOff} from 'lucide-react'
import {Link} from 'react-router-dom'
import {SelectedDrinkContext} from '../../context/selectedDrinkProvider.tsx'

const Drink: FunctionComponent<IDrink> = ({type, id, glass, image, category, name}) => {
  const {selectedDrinkIds, toggleDrinkId} = useContext(SelectedDrinkContext)

  return (
    <div className={`drink-card ${selectedDrinkIds.has(id) && 'selected'}`}>
      <div className="image-container">
        <img src={image} alt={name} onClick={() => toggleDrinkId(id)} />
      </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">
          <Link to={`/drinks/${id}`}>
            <ChevronRight />
          </Link>
        </div>
      </div>
    </div>
  )
}

export default Drink
