Image Trail

import { useState, useEffect, FC } from 'react';

import { ImageTrail } from "@/components/ui/image-trail"; 

const DemoOne: FC = () => {
  const [isDarkMode, setIsDarkMode] = useState(true); 
  const [key, setKey] = useState(0); 

  
  const imageItems = [
    'https://cdn.21st.dev/assets/mirror/8c/8c3c610167e9f38d85687cfb038ab6eb3fe57fc436ed8d078a77b3a04f8ab1a3.jpg',
    'https://cdn.21st.dev/assets/mirror/8e/8e52a5ecf5089a402d6115b280bc14e626303689f28de9f8a14581822e2fc2ad.jpg',
    'https://cdn.21st.dev/assets/mirror/82/8227676284632af798c8bbb695561e7ff6c14b4e0228beb26bc63d56389df8d8.jpg',
    'https://cdn.21st.dev/assets/mirror/08/0836c1cab623a97c20f313dab5a86b1b3e0d2ffad83ca86a4d4a5ad89f0b27ca.jpg',
    'https://cdn.21st.dev/assets/mirror/d0/d0a2b7faf6a15d2a3b7c39c6f888e9a18f2f0dac4426f703659024dc2105608a.jpg',
    'https://cdn.21st.dev/assets/mirror/4e/4eb681846c8523851d3e562f231ae9f946582d42659e9177c0ba3a6d73e72db3.jpg',
    'https://cdn.21st.dev/assets/mirror/73/732d0f138b49165c751fd6dc32487f57d62009f99fa5e9d953b39cfab391324d.jpg',
    'https://picsum.photos/id/1030/300/300',
    'https://cdn.21st.dev/assets/mirror/a5/a5b1dc741602ca0a4c4a418c8a128993587fb4d2d3b08612e56dc87690a58385.jpg', 
    'https://cdn.21st.dev/assets/mirror/ea/ea2512da4417fb7bd6e255ea77fa443aa7c98c7cf3d2f24fc7e594fdca7aed77.jpg',
    'https://cdn.21st.dev/assets/mirror/78/78c43eec249238abf80697bc955408af6ac29cd42d98117ef09004d4a95bb378.jpg',
    'https://cdn.21st.dev/assets/mirror/a1/a19d56800503a04af80b8799942f13e54fadd1206ed8d6a69b6a7d705b954283.jpg',
  ];

  const [currentVariant, setCurrentVariant] = useState<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8>(1);

  useEffect(() => {
    
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = () => {
      const darkMode = mediaQuery.matches;
      setIsDarkMode(darkMode);
      document.documentElement.classList.toggle('dark', darkMode);
    };
    handleChange(); 
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, []);

  const handleVariantChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const newVariant = parseInt(event.target.value, 10) as (1 | 2 | 3 | 4 | 5 | 6 | 7 | 8);
    setCurrentVariant(newVariant);
    setKey(prevKey => prevKey + 1);
  };

  
  const pageBgColor = isDarkMode ? "bg-black" : "bg-white";
  const textColor = isDarkMode ? "text-white" : "text-black";
  const selectBgColor = isDarkMode ? "bg-neutral-800" : "bg-neutral-200";
  const selectBorderColor = isDarkMode ? "border-neutral-600" : "border-neutral-400";

  return (
    <div className={`flex flex-col w-full min-h-screen justify-center items-center 
                   p-4 space-y-6 // Added space-y for layout
                   ${pageBgColor} ${textColor}
                   transition-colors duration-300`}>
      
      <div className="absolute top-4 right-4 z-[200] flex items-center gap-2">
        <label htmlFor="variant-select" className={`text-sm font-medium ${textColor}`}>
          Variant:
        </label>
        <select 
          id="variant-select"
          value={currentVariant} 
          onChange={handleVariantChange}
          className={`p-2 rounded-md text-sm cursor-pointer
                      ${selectBgColor} ${textColor} 
                      border ${selectBorderColor} 
                      focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500`}
        >
          {Array.from({ length: 8 }, (_, i) => i + 1).map(v => (
            <option key={v} value={v}>{v}</option>
          ))}
        </select>
      </div>

      <div 
        style={{ 
          width: 'clamp(300px, 80vmin, 700px)', 
          height: '500px',
          position: 'relative', 
          overflow: 'hidden'
        }}
        className="border-2 border-neutral-300 dark:border-neutral-700 rounded-lg shadow-xl" 
      >
        <ImageTrail
          key={key} 
          items={imageItems}
          variant={currentVariant}
      
        />
      </div>
      
      <p className={`text-center text-sm mt-4 ${isDarkMode ? 'text-neutral-400' : 'text-neutral-600'}`}>
        Move your mouse over the area above.
      </p>
    </div>
  );
};

export { DemoOne };