`components/RelatedWines.tsx`

131 lines
'use client'

import { useState, useEffect } from 'react'
import WineCard from './WineCard'

interface RelatedWinesProps {
  currentWine: {
    name: string
    type?: string
    region?: string
    varietal?: string
  }
}

export default function RelatedWines({ currentWine }: RelatedWinesProps) {
  const [wines, setWines] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    loadRelatedWines()
  }, [currentWine])

  const loadRelatedWines = async () => {
    try {
      setLoading(true)
      // In a real implementation, fetch related wines from API
      // For now, simulate loading
      await new Promise(resolve => setTimeout(resolve, 500))

      // Mock related wines
      setWines([
        {
          name: 'Silver Oak Cabernet Sauvignon',
          vintage: '2020',
          price: '99.99',
          rating: 90,
          source: 'Vivino',
          winery: 'Silver Oak',
          region: 'Napa Valley',
          type: 'Red Wine',
          badge: 'featured'
        },
        {
          name: 'Stag\'s Leap Artemis Cabernet',
          vintage: '2021',
          price: '74.99',
          rating: 88,
          source: 'Total Wine',
          winery: 'Stag\'s Leap Wine Cellars',
          region: 'Napa Valley',
          type: 'Red Wine',
          badge: 'deal'
        },
        {
          name: 'Opus One Overture',
          vintage: 'NV',
          price: '149.99',
          rating: 95,
          source: 'K&L',
          winery: 'Opus One',
          region: 'Napa Valley',
          type: 'Red Wine',
          badge: 'featured'
        },
        {
          name: 'Jordan Cabernet Sauvignon',
          vintage: '2020',
          price: '64.99',
          rating: 86,
          source: 'Vivino',
          winery: 'Jordan Vineyard & Winery',
          region: 'Sonoma',
          type: 'Red Wine',
          badge: 'deal'
        }
      ])
    } catch (err) {
      console.error('Error loading related wines:', err)
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <section className="mt-12">
        <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-6">
          You Might Also Like
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {[...Array(4)].map((_, i) => (
            <div key={i} className="bg-white rounded-2xl shadow-md h-96 animate-pulse">
              <div className="h-48 bg-gray-200 rounded-t-2xl" />
              <div className="p-5 space-y-3">
                <div className="h-4 bg-gray-200 rounded w-3/4" />
                <div className="h-4 bg-gray-200 rounded w-1/2" />
                <div className="h-8 bg-gray-200 rounded" />
              </div>
            </div>
          ))}
        </div>
      </section>
    )
  }

  if (wines.length === 0) {
    return null
  }

  return (
    <section className="mt-12 animate-slide-up">
      <div className="mb-6">
        <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
          You Might Also Like
        </h2>
        <p className="text-gray-600">
          Similar wines from {currentWine.region || 'the same region'}
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {wines.map((wine, index) => (
          <div key={index} className="animate-fade-in" style={{ animationDelay: `${index * 0.1}s` }}>
            <WineCard wine={wine} />
          </div>
        ))}
      </div>
    </section>
  )
}