import React from 'react';
import { Smartphone, Monitor, Sun, Moon, Layers } from 'lucide-react';

export type LayoutVariant = 'combined' | 'light-intro' | 'dark-hero';

interface ViewModeControlsProps {
  layoutVariant: LayoutVariant;
  setLayoutVariant: (variant: LayoutVariant) => void;
  isMobileFrame: boolean;
  setIsMobileFrame: (val: boolean) => void;
}

export const ViewModeControls: React.FC<ViewModeControlsProps> = ({
  layoutVariant,
  setLayoutVariant,
  isMobileFrame,
  setIsMobileFrame,
}) => {
  return (
    <div className="bg-[#1A1613] text-amber-100 py-2.5 px-4 border-b border-amber-900/40 text-xs shadow-inner">
      <div className="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-3">
        
        {/* Brand Tag */}
        <div className="flex items-center gap-2">
          <span className="w-2 h-2 rounded-full bg-[#E11D48] animate-ping" />
          <span className="font-bold text-amber-200 tracking-wide">
            TimeNLife Homepage Layout Preview
          </span>
        </div>

        {/* Layout Variant Toggles */}
        <div className="flex items-center gap-1.5 bg-black/40 p-1 rounded-xl border border-amber-900/30">
          <button
            onClick={() => setLayoutVariant('combined')}
            className={`flex items-center gap-1.5 px-3 py-1 rounded-lg font-medium transition-all cursor-pointer ${
              layoutVariant === 'combined'
                ? 'bg-[#D91B42] text-white shadow-md'
                : 'text-amber-200/70 hover:text-white'
            }`}
          >
            <Layers className="w-3.5 h-3.5" />
            <span>Full Layout</span>
          </button>

          <button
            onClick={() => setLayoutVariant('dark-hero')}
            className={`flex items-center gap-1.5 px-3 py-1 rounded-lg font-medium transition-all cursor-pointer ${
              layoutVariant === 'dark-hero'
                ? 'bg-[#D91B42] text-white shadow-md'
                : 'text-amber-200/70 hover:text-white'
            }`}
          >
            <Moon className="w-3.5 h-3.5" />
            <span>Dark Hero (Ref 3)</span>
          </button>

          <button
            onClick={() => setLayoutVariant('light-intro')}
            className={`flex items-center gap-1.5 px-3 py-1 rounded-lg font-medium transition-all cursor-pointer ${
              layoutVariant === 'light-intro'
                ? 'bg-[#D91B42] text-white shadow-md'
                : 'text-amber-200/70 hover:text-white'
            }`}
          >
            <Sun className="w-3.5 h-3.5" />
            <span>Light Banner (Ref 2)</span>
          </button>
        </div>

        {/* Viewport Frame Toggle */}
        <div className="flex items-center gap-2">
          <span className="text-amber-200/60 hidden sm:inline">Device View:</span>
          <div className="flex items-center bg-black/40 p-1 rounded-xl border border-amber-900/30">
            <button
              onClick={() => setIsMobileFrame(false)}
              className={`p-1.5 rounded-lg transition-all cursor-pointer ${
                !isMobileFrame
                  ? 'bg-amber-500/20 text-amber-200 border border-amber-500/30'
                  : 'text-amber-200/50 hover:text-amber-100'
              }`}
              title="Full Screen Width"
            >
              <Monitor className="w-4 h-4" />
            </button>
            <button
              onClick={() => setIsMobileFrame(true)}
              className={`p-1.5 rounded-lg transition-all cursor-pointer ${
                isMobileFrame
                  ? 'bg-amber-500/20 text-amber-200 border border-amber-500/30'
                  : 'text-amber-200/50 hover:text-amber-100'
              }`}
              title="Mobile Device Mockup"
            >
              <Smartphone className="w-4 h-4" />
            </button>
          </div>
        </div>

      </div>
    </div>
  );
};