"use client";

import Image from "next/image";
import { MapPin, Calendar } from "lucide-react";

export interface EventItem {
  id: number;
  title: string;
  date: string;
  time: string;
  venue: string;
  city: string;
  priceFrom: number;
  imageSrc: string;
}

interface EventCardProps {
  event: EventItem;
}

export default function EventCard({ event }: EventCardProps) {
  return (
    <div className="flex gap-4 bg-[#1C1C1E] rounded-[16px] overflow-hidden p-3">
      {/* Poster thumbnail */}
      <div className="relative w-[110px] h-[110px] flex-shrink-0 rounded-xl overflow-hidden">
        <Image
          src={event.imageSrc}
          alt={event.title}
          fill
          className="object-cover"
          sizes="110px"
        />
      </div>

      {/* Info */}
      <div className="flex flex-col justify-between flex-1 min-w-0 py-0.5">
        <p className="font-bold text-[15px] leading-tight text-white line-clamp-2">
          {event.title}
        </p>

        <div className="flex flex-col gap-1 mt-1">
          {event.date && (
            <div className="flex items-center gap-1.5 text-[#8E8E93] text-xs">
              <Calendar size={12} strokeWidth={2} />
              <span>
                {event.date}, {event.time}
              </span>
            </div>
          )}
          <div className="flex items-center gap-1.5 text-[#8E8E93] text-xs">
            <MapPin size={12} strokeWidth={2} />
            <span className="truncate">
              {event.venue}
            </span>
          </div>
          <span className="text-[#8E8E93] text-xs">{event.city}</span>
        </div>

        {/* Price + CTA */}
        <div className="flex items-center justify-between mt-2">
          <span className="text-white text-sm font-medium">
            от {event.priceFrom.toLocaleString("ru-RU")} ₽
          </span>
          <button className="bg-accent hover:bg-accent-hover transition-colors text-white text-xs font-semibold px-4 py-2 rounded-full whitespace-nowrap">
            Выбрать билет
          </button>
        </div>
      </div>
    </div>
  );
}
