"use client";

import Sidebar from "@components/Sidebar";
import Map from "@components/Map";
import { useState, useMemo } from "react";

export default function Observatories() {
  const [selectedEventId, setSelectedEventId] = useState("");
  const [hoveredEventId, setHoveredEventId] = useState("");

  const events = useMemo(
    () => [
      {
        id: "1234",
        title: "Earthquake - Berlin Observatory",
        text1: "Logged by ",
        text2: "30 minutes ago",
        longitude: 10.4515, // Near Berlin, Germany
        latitude: 52.52,
      },
      {
        id: "2134",
        title: "New Observatory - Phuket, Thailand",
        text1: "Dr. Neil Armstrong",
        text2: "2 weeks ago",
        longitude: -122.4194,
        latitude: 37.7749,
      },
      {
        id: "2314",
        title: "Observatory Scientist Change",
        text1: "Dr. Samantha Green new lead scientist",
        text2: "1 month ago",
        longitude: 139.6917,
        latitude: 35.6762,
      },
    ],
    []
  );

  return (
    <div className="h-full flex overflow-hidden">
      <div className="flex-grow">
        <Map
          events={events}
          selectedEventId={selectedEventId}
          setSelectedEventId={setSelectedEventId}
          hoveredEventId={hoveredEventId}
          setHoveredEventId={setHoveredEventId}
          mapType="observatories"
        ></Map>
      </div>
      <Sidebar
        logTitle="Observatory Mapping"
        logSubtitle="Record and search observatories - time/date set-up, location, scientists and recent earthquakes"
        recentsTitle="Observatory Events"
        events={events}
        selectedEventId={selectedEventId}
        setSelectedEventId={setSelectedEventId}
        hoveredEventId={hoveredEventId}
        setHoveredEventId={setHoveredEventId}
        button1Name="Log a New Observatory"
        button2Name="Search Observatories"
      ></Sidebar>
      {/* <SidebarTest></SidebarTest> */}
    </div>
  );
}