"use client";
import Sidebar from "@/components/sidebar";
import { useState, useMemo } from "react";

export default function Warehouse() {
    const [selectedEventId, setSelectedEventId] = useState("");
    const [hoveredEventId, setHoveredEventId] = useState("");
    const events = useMemo(
      () => [
        {
          id: "1234",
          title: "Artifact found - Germany Earthquake",
          text1: "Mortar and pestle",
          text2: "10 minutes ago",
          longitude: 10.4515, // Near Berlin, Germany
          latitude: 52.52,
        },
        {
          id: "2134",
          title: "All artifacts from California earthquake transported",
          text1: "India to London",
          text2: "15 hours ago",
          longitude: -122.4194, // Near San Francisco, California, USA
          latitude: 37.7749,
        },
        {
          id: "2341",
          title: "7 artifacts destroyed - Spain earthquake",
          text1: "edVases and pots from Madrid",
          text2: "3 weeks ago",
          longitude: -3.7038, // Near Madrid, Spain
          latitude: 40.4168,
        },
      ],
      []
    );

  return (
    <div className="w-full h-full">
      <p>
        warehouse image pasted in here
      </p>
      <Sidebar
        logTitle="Artifact Retrieval and Tracking"
        logSubtitle="Record new artifacts collected - name, description, time/date found, location found, scientist and collection stage"
        recentsTitle="Artifact News"
        events={events}
        selectedEventId={selectedEventId}
        setSelectedEventId={setSelectedEventId}
        hoveredEventId={hoveredEventId}
        setHoveredEventId={setHoveredEventId}
        button1Name="Log New Artifacts"
        button2Name="Search Artifacts"
      ></Sidebar>
    </div>
  );
}