"use client";

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

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

  const events = useMemo(
    () => [
      {
        id: "1234",
        title: "Earthquake in Germany",
        text1: "Magnitude 8.5",
        text2: "30 minutes ago",
        magnitude: 8.5,
        longitude: 10.4515, // Near Berlin, Germany
        latitude: 52.52,
      },
      {
        id: "2134",
        title: "Earthquake in California",
        text1: "Magnitude 5.3",
        text2: "2 hours ago",
        magnitude: 5.3,
        longitude: -122.4194, // Near San Francisco, California, USA
        latitude: 37.7749,
      },
      {
        id: "2314",
        title: "Tremor in Japan",
        text1: "Magnitude 4.7",
        text2: "5 hours ago",
        magnitude: 4.7,
        longitude: 139.6917, // Near Tokyo, Japan
        latitude: 35.6762,
      },
      {
        id: "2341",
        title: "Tremor in Spain",
        text1: "Magnitude 2.1",
        text2: "10 hours ago",
        magnitude: 2.1,
        longitude: -3.7038, // Near Madrid, Spain
        latitude: 40.4168,
      },
    ],
    []
  );

  return (
    <div className="h-full flex overflow-hidden">
      <div className="flex-grow">
        <Map
          events={events}
          selectedEventId={selectedEventId}
          setSelectedEventId={setSelectedEventId}
          hoveredEventId={hoveredEventId}
          setHoveredEventId={setHoveredEventId}
          mapType="Earthquakes"
        ></Map>
      </div>
      <Sidebar
        logTitle="Log an Earthquake"
        logSubtitle="Record new earthquakes - time/date, location, magnitude, observatory and scientists"
        recentsTitle="Recent Earthquakes"
        events={events}
        selectedEventId={selectedEventId}
        setSelectedEventId={setSelectedEventId}
        hoveredEventId={hoveredEventId}
        setHoveredEventId={setHoveredEventId}
        button1Name="Log an Earthquake"
        button2Name="Search Earthquakes"
      ></Sidebar>
      {/* <SidebarTest></SidebarTest> */}
    </div>
  );
}