import React from 'react';
import Link from "next/link";

const Sidebar = () => {
    return (
        <div className="flex flex-col h-screen w-64 bg-gray-400 text-white border-l border-gray-700">
            <div className="flex flex-col p-4 border-b border-gray-700">
                <h2 className="text-xl font-semibold mb-2">Log an Earthquake</h2>
                <p className="text-sm text-gray-700">
                    Record new earthquakes - time/date, location, magnitude, observatory and scientists
                </p>
                <button className="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
                    <Link href="/">
                        Log Event
                    </Link>
                </button>
            </div>

            {/* Section: Recent Events - Will need to be replaced with a link to the database*/}
            <div className="flex-1 p-4">
                <h2 className="text-xl font-semibold mb-2">Recent Events</h2>
                <ul className="space-y-2">
                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
                        <p className="text-sm">Earthquake in California</p>
                        <p className="text-xs text-gray-300">Magnitude 5.3</p>
                        <p className="text-xs text-gray-400">2 hours ago</p>
                    </li>
                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
                        <p className="text-sm">Tremor in Japan</p>
                        <p className="text-xs text-gray-300">Magnitude 4.7</p>
                        <p className="text-xs text-gray-400">5 hours ago</p>
                    </li>
                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
                        <p className="text-sm">Tremor in Spain</p>
                        <p className="text-xs text-gray-300">Magnitude 2.1</p>
                        <p className="text-xs text-gray-400">10 hours ago</p>
                    </li>
                </ul>
            </div>
        </div>
    );
};

export default Sidebar;
