'use client'

import { EventCard } from '@/entities/event'
import type { Event } from '@/entities/event'
import { GlitchText, Button } from '@/shared/ui'
import Link from 'next/link'

interface EventsTimelineProps {
  events: Event[]
  title?: string
  showViewAll?: boolean
  variant?: 'grid' | 'list' | 'featured'
}

export function EventsTimeline({
  events,
  title,
  showViewAll = false,
  variant = 'grid',
}: EventsTimelineProps) {
  if (events.length === 0) {
    return (
      <section className="py-12">
        <div className="text-center py-16 border-4 border-dashed border-[var(--color-border)]">
          <p className="font-pixel text-[var(--color-text-muted)] text-sm">
            Событий пока нет
          </p>
        </div>
      </section>
    )
  }

  return (
    <section className="py-12">
      {/* Header */}
      {(title || showViewAll) && (
        <div className="flex items-center justify-between mb-8">
          {title && (
            <GlitchText
              as="h2"
              intensity="subtle"
              className="text-xl sm:text-2xl"
            >
              {title}
            </GlitchText>
          )}
          {showViewAll && (
            <Link href="/events">
              <Button variant="ghost" size="sm">
                Все события →
              </Button>
            </Link>
          )}
        </div>
      )}

      {/* Featured variant - first event large, rest in grid */}
      {variant === 'featured' && events.length > 0 && (
        <div className="space-y-8">
          <EventCard event={events[0]} variant="featured" />
          {events.length > 1 && (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {events.slice(1).map((event) => (
                <EventCard key={event._id} event={event} />
              ))}
            </div>
          )}
        </div>
      )}

      {/* Grid variant */}
      {variant === 'grid' && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {events.map((event) => (
            <EventCard key={event._id} event={event} />
          ))}
        </div>
      )}

      {/* List variant */}
      {variant === 'list' && (
        <div className="space-y-4">
          {events.map((event) => (
            <EventCard key={event._id} event={event} variant="compact" />
          ))}
        </div>
      )}
    </section>
  )
}