/**
 * Provider Banner Component
 *
 * Displays informational banner for bookings managed by external providers.
 * Used to communicate read-only state for FairPlay clubs.
 */

import { Info } from 'lucide-react';
import type { ProviderInfo } from '@/src/types/bookings';

interface ProviderBannerProps {
  provider: ProviderInfo;
  className?: string;
}

export default function ProviderBanner({ provider, className = '' }: ProviderBannerProps) {
  // Only show banner for non-local providers
  if (provider.type === 'local') {
    return null;
  }

  const providerName = provider.type === 'fairplay' ? 'FairPlay' : 'an external provider';

  return (
    <div
      className={`bg-blue-50 border-2 border-blue-200 rounded-lg p-4 ${className}`}
      role="alert"
    >
      <div className="flex items-start space-x-3">
        <Info className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
        <div className="flex-1">
          <h4 className="text-sm font-semibold text-blue-900 mb-1">
            This club is managed by {providerName}
          </h4>
          <p className="text-sm text-blue-700">
            Admin edits are disabled here. Changes must be made in the provider's system.
          </p>
        </div>
      </div>
    </div>
  );
}