# All files / src/components/user EventCard.tsx

0% Statements 0/9
0% Branches 0/14
0% Functions 0/2
0% Lines 0/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122

     'use client';

    import React from 'react';
    import Link from 'next/link';
    import { Calendar, Clock } from 'lucide-react';
    import { cn } from '@/lib/utils';
    import { FavoriteButton } from '@/components/user/FavoriteButton';

    interface EventCardProps {
      id: number;
      title: string;
      description?: string;
      year?: number | string;
      image_url?: string;
      backdrop_url?: string;
      event_type?: string;
      schedules?: any[];
      className?: string;
    }

    /**
     * EventCard - Horizontal card component for Events
     *
     * Features:
     * - Horizontal layout with smaller height
     * - Event type badge
     * - Schedule information
     * - No "Ver" button - entire card is clickable
     */
    export default function EventCard({
      id,
      title,
      description,
      year,
      image_url,
      backdrop_url,
      event_type,
      schedules = [],
      className}: EventCardProps) {
      const displayImage = backdrop_url || image_url;

      // Get next schedule if available
      const nextSchedule = schedules && schedules.length > 0 ? schedules[0] : null;

      return (
        <Link
          href={`/user/content/${id}/watch`}
          className={cn(
            'group relative overflow-hidden rounded-xl border border-slate-700/50 bg-slate-800/30 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-blue-500/60 hover:shadow-xl hover:shadow-blue-500/20',
            className
          )}
        >
          <div className="flex h-32">
            {/* Image Section - Fixed width */}
            <div
              className="relative w-48 flex-shrink-0 bg-cover bg-center"
              style={{
                backgroundImage: displayImage
                  ? `url(${displayImage})`
                  : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
              }}
            >
              {!displayImage && (
                <div className="absolute inset-0 flex items-center justify-center bg-slate-900/60">
                  <Calendar className="h-12 w-12 text-slate-400" />
                </div>
              )}

              {/* Event Type Badge */}
              {event_type && (
                <div className="absolute top-2 left-2">
                  <span className="rounded-full bg-red-600/90 px-2 py-1 text-xs font-medium uppercase tracking-wide text-white">
                    {event_type}
                  </span>
                </div>
              )}
            </div>

            {/* Content Section */}
            <div className="flex flex-1 flex-col justify-between p-4">
              <div className="flex items-start justify-between gap-2">
                <div className="flex-1 min-w-0">
                  <h3 className="text-base font-semibold text-white line-clamp-1 group-hover:text-blue-200">
                    {title}
                  </h3>
                  {description && (
                    <p className="text-sm text-slate-400 line-clamp-2 mt-1">
                      {description}
                    </p>
                  )}
                </div>

                {/* Favorite Button */}
                <div onClick={(e) => e.preventDefault()}>
                  <FavoriteButton
                    contentType="movie"
                    contentId={String(id)}
                    className="h-8 w-8"
                    iconClassName="h-4 w-4"
                  />
                </div>
              </div>

              {/* Footer Info */}
              <div className="flex items-center gap-4 text-xs text-slate-400">
                {year && <span>{year}</span>}
                {nextSchedule && (
                  <div className="flex items-center gap-1">
                    <Clock className="h-3 w-3" />
                    <span>
                      {new Date(nextSchedule.scheduled_at).toLocaleDateString()}
                    </span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </Link>
      );
    }