'use client';

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import MembershipStatus from '@/components/leagues/MembershipStatus';
import FeatureLimitationTooltip from '@/components/alpha/FeatureLimitationTooltip';
import { getLeagueCoverClasses } from '@/lib/leagueCovers';

interface LeagueHeaderProps {
  leagueId: string;
  leagueName: string;
  description?: string | null;
  ownerId: string;
  ownerName: string;
}

export default function LeagueHeader({
  leagueId,
  leagueName,
  description,
  ownerId,
  ownerName,
}: LeagueHeaderProps) {
  const coverUrl = `https://picsum.photos/seed/${leagueId}/1200/280?blur=2`;

  return (
    <div className="mb-8">
      <div className="mb-4">
        <div className={getLeagueCoverClasses(leagueId)} aria-hidden="true">
          <div className="relative w-full h-full">
            <Image
              src={coverUrl}
              alt="League cover placeholder"
              fill
              className="object-cover opacity-80"
              sizes="100vw"
            />
          </div>
        </div>
      </div>

      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <h1 className="text-3xl font-bold text-white">{leagueName}</h1>
          <MembershipStatus leagueId={leagueId} />
        </div>
        <FeatureLimitationTooltip message="Multi-league memberships coming in production">
          <span className="px-2 py-1 text-xs font-medium bg-primary-blue/10 text-primary-blue rounded border border-primary-blue/30">
            Alpha: Single League
          </span>
        </FeatureLimitationTooltip>
      </div>

      {description && (
        <p className="text-gray-400 mb-2">{description}</p>
      )}

      <div className="text-sm text-gray-400 mb-6">
        <span className="mr-2">Owner:</span>
        <Link
          href={`/drivers/${ownerId}?from=league&leagueId=${leagueId}`}
          className="text-primary-blue hover:underline"
        >
          {ownerName}
        </Link>
      </div>
    </div>
  );
}