import React from 'react';
import { Phone, Clock, MapPin } from 'lucide-react';
import { PRACTICE_INFO } from '../data/mockData';

interface TopHeaderProps {
  fontSizeScale: number;
  setFontSizeScale: (scale: number) => void;
  onOpenBooking: () => void;
}

export const TopHeader: React.FC<TopHeaderProps> = ({
  fontSizeScale,
  setFontSizeScale,
  onOpenBooking
}) => {
  return (
    <div className="bg-slate-900 text-slate-200 text-xs sm:text-sm py-2 px-4 border-b border-slate-800 transition-colors">
      <div className="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2">
        {/* Left: Location and Hours */}
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-1.5 text-slate-300">
            <MapPin className="w-3.5 h-3.5 text-secondary flex-shrink-0" />
            <span className="hidden md:inline">3794 Mokale Rd, Mmabatho</span>
            <span className="md:hidden">Mmabatho, Mafikeng</span>
          </div>
          <div className="hidden sm:flex items-center space-x-1.5 text-slate-300 border-l border-slate-700 pl-4">
            <Clock className="w-3.5 h-3.5 text-secondary flex-shrink-0" />
            <span>Mon–Fri: 08:00–17:00 | Sat: 08:30–13:00</span>
          </div>
        </div>

        {/* Right: Phone, Emergency & Accessibility */}
        <div className="flex items-center space-x-4 ml-auto">
          <a
            href={`tel:${PRACTICE_INFO.phone.replace(/\s+/g, '')}`}
            className="flex items-center space-x-1.5 font-medium text-white hover:text-medical-accent transition-colors"
          >
            <Phone className="w-3.5 h-3.5 text-primary animate-pulse" />
            <span>{PRACTICE_INFO.phone}</span>
          </a>

          {/* Accessibility Font Size Toggle */}
          <div className="hidden lg:flex items-center space-x-1 bg-slate-800 rounded-full px-2 py-0.5 border border-slate-700" title="Accessible Typography Scale">
            <span className="text-[10px] text-slate-400 mr-1">Text:</span>
            <button
              onClick={() => setFontSizeScale(Math.max(0.9, fontSizeScale - 0.1))}
              className={`px-1.5 py-0.5 rounded text-xs font-semibold hover:bg-slate-700 ${fontSizeScale < 1 ? 'text-secondary font-bold' : 'text-slate-300'}`}
              aria-label="Decrease font size"
            >
              A-
            </button>
            <button
              onClick={() => setFontSizeScale(1.0)}
              className={`px-1.5 py-0.5 rounded text-xs font-semibold hover:bg-slate-700 ${fontSizeScale === 1 ? 'text-secondary font-bold bg-slate-700/50' : 'text-slate-300'}`}
              aria-label="Normal font size"
            >
              A
            </button>
            <button
              onClick={() => setFontSizeScale(Math.min(1.2, fontSizeScale + 0.1))}
              className={`px-1.5 py-0.5 rounded text-xs font-semibold hover:bg-slate-700 ${fontSizeScale > 1 ? 'text-secondary font-bold' : 'text-slate-300'}`}
              aria-label="Increase font size"
            >
              A+
            </button>
          </div>

          <button
            onClick={onOpenBooking}
            className="bg-[#E63946]/20 hover:bg-[#E63946]/30 text-white border border-[#E63946]/60 px-3 py-0.5 rounded-full font-semibold transition-all text-xs flex items-center space-x-1.5 group shadow-xs"
          >
            <span className="w-2 h-2 rounded-full bg-[#E63946] animate-ping inline-flex"></span>
            <span className="text-[#ff8f97] font-bold group-hover:text-white transition-colors">24/7 Emergency Line</span>
          </button>
        </div>
      </div>
    </div>
  );
};