HostRooms.tsx

import { useState } from 'react';
import data from '../afterTownHallData';
import BreakOutRoomForm from './BreakOutRoomForm';
interface BR {
  name: string;
  host: string;
  description: string;
}

const HostRoomCard = ({ br, index, hoveredIndex, setHoveredIndex }: { br: BR; index: number; hoveredIndex: number | null; setHoveredIndex: (index: number | null) => void }) => {
  return (
    <div
      className="relative aspect-square text-center bg-opacity-10 backdrop-blur-md shadow-lg border border-opacity-20 rounded-lg flex flex-col justify-between overflow-hidden transition-all duration-300 ease-in-out"
      onMouseEnter={() => setHoveredIndex(index)}
      onMouseLeave={() => setHoveredIndex(null)}
      style={{
        opacity: hoveredIndex === index ? 1 : 0.8,
      }}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1440 640"
        className="absolute -z-40 w-full"
      >
        <path
          fill="#6155D8"
          fillOpacity="1"
          d="M0,320L0,320L120,373C240,427,480,533,720,550C960,567,1200,493,1320,456L1440,420L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z"
        ></path>
      </svg>
      <div className="flex flex-col justify-between p-8 h-full">
        <h2 className="text-white text-2xl phone:text-[16px] sm:text-md md:text-[16.5px] lg:text-lg xl:text-xl font-semibold mb-8">
          {br.name}
        </h2>
        <p className="text-black text-lg font-bold text-opacity-80 mb-4">
          Host: {br.host}
        </p>
      </div>
      <div
        className={`absolute inset-0 bg-white flex items-center justify-center p-4 transition-opacity duration-300 ${
          hoveredIndex === index ? 'opacity-100' : 'opacity-0'
        }`}
        style={{ pointerEvents: hoveredIndex === index ? 'auto' : 'none' }}
      >
        <p className="text-black text-lg p-6">{br.description}</p>
      </div>
    </div>
  );
};

const HostRooms = () => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

  return (
    <div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-10">
        {data.breakoutRooms.map((br, index) => (
          <HostRoomCard 
            key={index} 
            br={br} 
            index={index}
            hoveredIndex={hoveredIndex}
            setHoveredIndex={setHoveredIndex}
          />
        ))}

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

export default HostRooms;