'use client';

import { useState } from 'react';
import ImageModal from './ImageModal';
import Image from 'next/image';

const MAPS = [
  { src: '/trend analysis maps/Illinois Osteopathic Physician Growth.jpg', title: 'Illinois Osteopathic Physician Growth' },
  { src: '/trend analysis maps/2016-Allopathic-Physician-Changes-by-borough.jpg', title: 'Allopathic Physician Changes (Alaska)' },
  { src: '/trend analysis maps/2016-Osteopathic-Physician-Changes-by-borough.jpg', title: 'Osteopathic Physician Changes (Alaska)' },
  { src: '/trend analysis maps/2016-Physicians-Assistant-Changes-by-borough.jpg', title: 'PA Changes (Alaska)' }
];

export default function TrendMapGalleryBento() {
  const [activeMap, setActiveMap] = useState<string | null>(null);

  return (
    <div className="w-full">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-[200px]">
        {MAPS.map((map, idx) => {
          let layoutClass = '';
          if (idx === 0) layoutClass = 'md:col-span-2 lg:col-span-2 lg:row-span-2';
          else if (idx === 1) layoutClass = 'md:col-span-2 lg:col-span-2 lg:row-span-1';
          else if (idx === 2 || idx === 3) layoutClass = 'md:col-span-1 lg:col-span-1 lg:row-span-1';

          return (
          <div 
            key={idx} 
            className={`relative rounded-2xl overflow-hidden cursor-pointer group shadow-sm hover:shadow-xl transition-all border border-outline-variant/20 ${layoutClass}`}
            onClick={() => setActiveMap(map.src)}
          >
            <Image 
              src={map.src} 
              alt={map.title} 
              fill
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
              className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-[#0B1A2A]/90 via-[#0B1A2A]/40 to-transparent opacity-80 group-hover:opacity-100 transition-opacity"></div>
            <div className="absolute bottom-0 left-0 w-full p-6 text-left flex items-center justify-between">
              <h4 className="font-headline font-bold text-white text-lg drop-shadow-md">{map.title}</h4>
              <div className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0">
                <span className="material-symbols-outlined">zoom_in</span>
              </div>
            </div>
          </div>
          );
        })}
      </div>
      <ImageModal 
        src={activeMap} 
        alt="Enlarged Map View" 
        isOpen={!!activeMap} 
        onClose={() => setActiveMap(null)} 
      />
    </div>
  );
}