'use client';

import { useEffect, useState } from 'react';

interface BannerConfig {
  active: boolean;
  header: string;
  paragraph: string;
  hasLink: boolean;
  buttonLabel?: string;
  buttonLink?: string;
  color: 'red' | 'yellow' | 'green';
}

export default function InfoBanner() {
  const [config, setConfig] = useState<BannerConfig | null>(null);

  useEffect(() => {
    fetch('/config/banner.json')
      .then(res => res.json())
      .then(data => setConfig(data))
      .catch(err => console.error('Failed to load banner config:', err));
  }, []);

  if (!config || !config.active) return null;

  const colorMap = {
    red: {
      bg: 'bg-[var(--color-red)]',
      text: 'text-white',
      button: 'bg-white bg-opacity-25 hover:bg-opacity-35 text-[var(--color-red)]',
    },
    yellow: {
      bg: 'bg-[#f2b600]',
      text: 'text-[var(--foreground)]',
      button: 'bg-white bg-opacity-30 hover:bg-opacity-40 text-[var(--foreground)]',
    },
    green: {
      bg: 'bg-[var(--color-green)]',
      text: 'text-white',
      button: 'bg-white bg-opacity-25 hover:bg-opacity-35 text-[var(--color-green)]',
    },
  };

  const colors = colorMap[config.color];

  return (
    <div className={`${colors.bg} ${colors.text} px-12 py-2.5 flex items-center justify-between gap-6 text-sm`}>
      <div>
        <strong>{config.header}</strong> <span className="mx-2">•</span> {config.paragraph}
      </div>
      {config.hasLink && config.buttonLink && (
        <a
          href={config.buttonLink}
          className={`flex-shrink-0 px-3 py-1 rounded font-semibold transition whitespace-nowrap ${colors.button}`}
        >
          {config.buttonLabel}
        </a>
      )}
    </div>
  );
}
