'use client';

import React from 'react';

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

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

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

interface CalendarMultiDayBarProps {
  event: Event;
  slug: string;
  rangeLabel: string;
  isStart: boolean;
  isEnd: boolean;
  isPast: boolean;
}

const CalendarMultiDayBar: React.FC<CalendarMultiDayBarProps> = ({
  event,
  slug,
  rangeLabel,
  isStart,
  isEnd,
  isPast,
}) => {
  const city = event.intezmeny?.[0]?.intezmeny?.intezmenyCime?.city || null;
  const title = [event.nev, rangeLabel, city].filter(Boolean).join(' | ');
  const showEndFade = isPast && isEnd;

  return (
    <Link
      href={{ pathname: '/program/[slug]', params: { slug } }}
      aria-label={event.nev}
      title={title}
      className={cn(
        'relative mx-0.5 my-0.5 flex h-8 items-center overflow-hidden border border-white/25 px-2.5 text-[13px] font-semibold leading-none text-white transition-opacity duration-200 hover:opacity-95 lg:h-[30px]',
        event.bgColor,
        isStart && 'border-l-2',
        isEnd && 'border-r-2'
      )}
    >
      <span className="flex min-w-0 items-center gap-2">
        {city?.trim() && (
          <span className="shrink-0 truncate border border-white/90 px-1.5 py-[4px] text-[12px] font-semibold uppercase tracking-[0.1em] text-white/95">
            {city}
          </span>
        )}
        <span className="truncate">{event.nev}</span>
      </span>
      {showEndFade && (
        <span className="pointer-events-none absolute right-0 top-0 h-full w-8 bg-gradient-to-l from-white/65 to-transparent" />
      )}
    </Link>
  );
};

export default CalendarMultiDayBar;