'use client'

import { useState } from 'react'
import Image from 'next/image'

export default function Drop() {
  const [selectedSize, setSelectedSize] = useState('50g')

  return (
    <div className="drop">
      <Image
        src="https://images.unsplash.com/photo-1604908554027-0b6c2c9c7e92"
        alt="Harlequin CBD"
        width={420}
        height={420}
        style={{ width: '100%', height: 'auto', borderRadius: '16px', objectFit: 'cover' }}
      />
      <div>
        <h2>Harlequin – Collective Drop</h2>
        <div className="meta">1kg Batch · Indoor · Switzerland</div>
        <div className="price">2.50 CHF / g · incl. 2.5% VAT</div>

        <div className="progress">
          <span></span>
        </div>
        <div className="meta">620g of 1,000g reserved</div>

        <div className="options">
          <button
            className={selectedSize === '50g' ? 'active' : ''}
            onClick={() => setSelectedSize('50g')}
          >
            50g
          </button>
          <button
            className={selectedSize === '100g' ? 'active' : ''}
            onClick={() => setSelectedSize('100g')}
          >
            100g
          </button>
          <button
            className={selectedSize === '250g' ? 'active' : ''}
            onClick={() => setSelectedSize('250g')}
          >
            250g
          </button>
        </div>

        <button className="cta">Join Drop</button>
      </div>
    </div>
  )
}