import Image from 'next/image'

interface PastDrop {
  name: string
  image: string
  soldIn: string
}

const pastDrops: PastDrop[] = [
  {
    name: 'Swiss Gold',
    image: 'https://images.unsplash.com/photo-1581091012184-5c7b4c101899',
    soldIn: 'Sold out in 42h',
  },
  {
    name: 'Lemon T1',
    image: 'https://images.unsplash.com/photo-1512436991641-6745cdb1723f',
    soldIn: 'Sold out in 19h',
  },
  {
    name: 'Alpine Frost',
    image: 'https://images.unsplash.com/photo-1600431521340-491eca880813',
    soldIn: 'Sold out in 31h',
  },
]

export default function PastDrops() {
  return (
    <div className="past">
      {pastDrops.map((drop, index) => (
        <div key={index} className="card">
          <Image
            src={drop.image}
            alt={drop.name}
            width={240}
            height={240}
            style={{ width: '100%', height: 'auto', borderRadius: '12px', marginBottom: '12px' }}
          />
          <strong>{drop.name}</strong>
          <br />
          <span className="meta">{drop.soldIn}</span>
        </div>
      ))}
    </div>
  )
}