import React from 'react';
import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
import { TeamLogo } from '../common/TeamLogo';
import { sanitizeClubName } from '../../utils/url';

export type NextMatchData = {
  competition?: string;
  home_id?: any;
  home?: string;
  home_logo_url?: string;
  away_id?: any;
  away?: string;
  away_logo_url?: string;
};

const NextMatch: React.FC<{
  data: NextMatchData | null;
  competitionName?: string;
  countdown?: string;
  onPrev?: () => void;
  onNext?: () => void;
  onOpen?: () => void;
  elementProps?: any;
}> = ({ data, competitionName, countdown, onPrev, onNext, onOpen, elementProps }) => {
  const show = data;
  return (
    <section
      className="next-match"
      {...(elementProps as any)}
      onClick={(e) => { e.stopPropagation(); onOpen?.(); }}
      style={{ cursor: onOpen ? 'pointer' : 'default', position: 'relative', ...(elementProps?.style || {}) }}
    >
      {onPrev && (
        <button
          aria-label="Předchozí soutěž"
          onClick={(e) => { e.stopPropagation(); onPrev?.(); }}
          className="nav prev"
          style={{ background: 'transparent', border: 'none', color: 'var(--text-on-primary)' }}
        >
          <FiChevronLeft size={24} />
        </button>
      )}

      <div className="team">
        <TeamLogo
          className="logo"
          teamId={show?.home_id}
          teamName={show?.home}
          facrLogo={show?.home_logo_url}
          size="custom"
          alt="Domácí"
          borderRadius="full"
        />
        <div>{sanitizeClubName(show?.home || '')}</div>
      </div>

      <div className="countdown">
        {competitionName && (
          <div style={{ fontSize: '0.8rem', opacity: 0.85, marginBottom: 4 }}>{competitionName}</div>
        )}
        {countdown || '—'}
        <div style={{ fontSize: '0.8rem', opacity: 0.85 }}>Začátek zápasu</div>
      </div>

      <div className="team">
        <TeamLogo
          className="logo"
          teamId={show?.away_id}
          teamName={show?.away}
          facrLogo={show?.away_logo_url}
          size="custom"
          alt="Hosté"
          borderRadius="full"
        />
        <div>{sanitizeClubName(show?.away || '')}</div>
      </div>

      {onNext && (
        <button
          aria-label="Další soutěž"
          onClick={(e) => { e.stopPropagation(); onNext?.(); }}
          className="nav next"
          style={{ background: 'transparent', border: 'none', color: 'var(--text-on-primary)' }}
        >
          <FiChevronRight size={24} />
        </button>
      )}
    </section>
  );
};

export default NextMatch;