'use client';

import React from 'react';

import { cn } from '@/lib/utils';

import { Event } from '@/types/Events';

import { Link } from '@/i18n/navigation';

interface CalendarEventBarProps {
  event: Event;
  time: string;
  slug: string;
}

const normalize = (value: string) =>
  value
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
    .toLowerCase()
    .trim();

const CalendarEventBar: React.FC<CalendarEventBarProps> = ({ event, time, slug }) => {
  const city = event.intezmeny?.[0]?.intezmeny?.intezmenyCime?.city || null;
  const isPast = new Date(event.kezdete) < new Date();
  const categoryLabel = event.esemenyKategoria?.[0]?.nev || event.category || '';
  const isOtherCategory = normalize(categoryLabel) === 'egyeb';

  return (
    <Link
      href={{ pathname: '/program/[slug]', params: { slug } }}
      aria-label={event.nev}
      className={cn(
        'group relative w-full border border-white/25 px-2 py-2 text-left transition-all duration-200 hover:opacity-95 hover:shadow-[0_16px_30px_-20px_rgba(20,25,40,0.55)]',
        event.bgColor,
        isPast && 'opacity-60'
      )}
    >
      <div className="mb-1 flex items-center justify-between gap-2">
        {!event.kezdeteDatum && (
          <div className="text-sm lg:text-base font-bold text-white">{time}</div>
        )}
        {categoryLabel && !isOtherCategory && (
          <div className="ml-auto truncate bg-black/15 px-1.5 py-[2px] text-[10px] font-semibold uppercase tracking-[0.14em] text-white/95 lg:bg-transparent lg:px-0 lg:py-0">
            {categoryLabel}
          </div>
        )}
      </div>

      <div className="mb-1 line-clamp-2 text-[13px] font-semibold leading-tight text-white">
        {event.nev}
      </div>

      {city && city.toLowerCase() !== 'budapest' && (
        <div className="w-fit truncate border border-white/90 px-1.5 py-[1px] text-[10px] font-semibold uppercase tracking-[0.12em] text-white/95">
          {city}
        </div>
      )}
    </Link>
  );
};

export default CalendarEventBar;