Gallery Section

'use client';

import { useState, useEffect } from 'react';
import { Component } from '@/components/ui/gallery-section';

const DemoOne = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const projects = [
    {
      name: "Project 4",
      backgroundImage: "https://i1.adis.ws/i/canon/get-inspired-long-exposure-black-white-stephen-mcnally-4_e62cd25fd3d241ccb7daaf4828ae75b1?$media-collection-half-dt-jpg$",
      vignetteImage: "https://i1.adis.ws/i/canon/get-inspired-long-exposure-black-white-stephen-mcnally-1-16x9_62a5193931b64b6ca604d69fea93ba49?$hero-header-half-16by9-dt-jpg"
    },
    {
      name: "Project 1",
      backgroundImage: "https://eurasianet.org/sites/default/files/styles/article/public/2019-01/Martin-1009.jpg?itok=sQxmHNtX",
      vignetteImage: "https://www.russianlife.com/sites/default/assets/Image/photo_2024-02-19_00-59-18.jpg"
    },
    {
      name: "Project 2",
      backgroundImage: "https://media.asbarez.com/wp-content/uploads/2025/02/10100520/A_09.jpg",
      vignetteImage: "https://121clicks.com/wp-content/uploads/2025/02/black-and-white-kids-photography-samuel-voskanyan-15.jpg"
    },
    {
      name: "Project 3",
      backgroundImage: "https://www.middleeasteye.net/sites/default/files/styles/max_2600x2600/public/3001_0.jpg.jpg?itok=bHYuNxEl",
      vignetteImage: "https://www.blind-magazine.com/wp-content/uploads/2022/01/antoine-agoudjian-an-armenian-story-en.jpg"
    }
  ];

  useEffect(() => {
    const handleMouseMove = (e) => {
      setMousePosition({ x: e.clientX, y: e.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return (
    <div style={{ height: '100vh', width: '100%', overflow: 'auto' }}>
      <Component mousePosition={mousePosition} projects={projects} />
    </div>
  );
};

export { DemoOne };