Dock

import { useState, useEffect, FC } from 'react';
import { Dock, DockItemData } from "@/components/ui/dock"; 
import { VscHome, VscArchive, VscAccount, VscSettingsGear } from "react-icons/vsc"; 

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

  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 iconColor = isDarkMode ? "#E0E0E0" : "#303030"; 
  const iconSize = 20; 

  const dockItems: DockItemData[] = [
    { icon: <VscHome size={iconSize} color={iconColor} />, label: 'Home', onClick: () => alert('Home!') },
    { icon: <VscArchive size={iconSize} color={iconColor} />, label: 'Archive', onClick: () => alert('Archive!') },
    { icon: <VscAccount size={iconSize} color={iconColor} />, label: 'Profile', onClick: () => alert('Profile!') },
    { icon: <VscSettingsGear size={iconSize} color={iconColor} />, label: 'Settings', onClick: () => alert('Settings!') },
  ];

  const panelHeightProp: number = 68;
  const baseItemSizeProp: number = 50;
  const magnificationProp: number = 70;

  const pageClasses = "bg-white text-black dark:bg-black dark:text-white";
  
  const dockPanelThemeClasses = "border-neutral-300 bg-white/70 backdrop-blur-md dark:border-neutral-700 dark:bg-black/70";
  
  const centralTextThemeClasses = "text-neutral-700 dark:text-neutral-300";
  const instructionalTextThemeClasses = "text-neutral-400 dark:text-neutral-600";


  return (
    <div className={`flex flex-col w-full h-screen justify-center items-center 
                   relative
                   ${pageClasses} 
                   transition-colors duration-300 select-none cursor-default`}> {/* Changed to cursor-default */}
      
      <div className="absolute inset-0 flex justify-center items-center pointer-events-none z-0">
        <h1 className={`text-3xl font-medium ${centralTextThemeClasses}`}>
          Try it out!
        </h1>
      </div>
      
      <div className="absolute bottom-0 left-0 right-0 flex justify-center pb-8 sm:pb-10"> 
        <Dock 
          items={dockItems}
          panelHeight={panelHeightProp}
          baseItemSize={baseItemSizeProp}
          magnification={magnificationProp}
          className={dockPanelThemeClasses} 
        />
      </div>
      
       <p className={`fixed bottom-2 left-1/2 -translate-x-1/2 text-center text-xs 
                      ${instructionalTextThemeClasses}`}>
        Hover over the dock icons.
      </p>
    </div>
  );
};

export { DemoOne };