'use client'

import React from 'react'
import { motion, useReducedMotion } from 'framer-motion'
import { SpotCard } from '@/components/ui'

interface SpotListSpot {
  id: string
  name: string
  description: string
  difficulty: 'BEGINNER' | 'INTERMEDIATE' | 'ADVANCED' | 'EXPERT'
  coverImage: string | null
  tags: string[]
  avgRating?: number | null
  reviewCount?: number
}

interface SpotListProps {
  spots: SpotListSpot[]
  emptyMessage?: string
}

export function SpotList({ spots, emptyMessage = 'Nenhum spot encontrado.' }: SpotListProps) {
  const reduced = useReducedMotion()

  if (spots.length === 0) {
    return (
      <div style={{ textAlign: 'center', padding: 'var(--ov-space-20)', color: 'var(--ov-slate)', fontFamily: 'var(--ov-font-sans)' }}>
        {emptyMessage}
      </div>
    )
  }

  const container = {
    hidden: { opacity: 0 },
    visible: { opacity: 1, transition: { staggerChildren: 0.06 } },
  }
  const item = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }

  return (
    <motion.div
      className="spot-list"
      variants={reduced ? undefined : container}
      initial="hidden"
      animate="visible"
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
        gap: 'var(--ov-space-6)',
      }}
    >
      {spots.map((spot) => (
        <motion.div key={spot.id} variants={reduced ? undefined : item}>
          <SpotCard
            spot={{
              ...spot,
              avgRating: spot.avgRating ?? null,
              reviewCount: spot.reviewCount ?? 0,
            }}
          />
        </motion.div>
      ))}
    </motion.div>
  )
}