import Link from "next/link";
import React, { Dispatch, SetStateAction, useState } from "react";
import { TbHexagon } from "react-icons/tb";

import Event from "@appTypes/Event";
import getMagnitudeColor from "@utils/getMagnitudeColour";

function setButton1(button1Name) {
	const [modalOpen, setModalOpen] = useState(false);
	return (
		modalOpen && (
			<div className="fixed z-50 inset-0 bg-black bg-opacity-50 flex items-center justify-center">
				<div className="bg-white rounded-lg shadow-lg max-w-6xl w-full p-10">
					<div className="flex items-center justify-between mb-3">
						<h2 className="text-2xl font-extrabold">Log New Earthquake</h2>
						<button
							onClick={() => setModalOpen(false)}
							className="text-2xl font-bold text-gray-500 hover:text-gray-900"
							aria-label="Close modal"
						>
							&times;
						</button>
					</div>
					{/* Blank Table */}
					<table className="w-full border mb-4">
						<thead>
							<tr>
								<th className="border px-2 py-1">Date</th>
								<th className="border px-2 py-1">Code</th>
								<th className="border px-2 py-1">Magnitude</th>
								<th className="border px-2 py-1">Observatory</th>
								<th className="border px-2 py-1">Type</th>
								<th className="border px-2 py-1">Latitude</th>
								<th className="border px-2 py-1">Longitude</th>
								<th className="border px-2 py-1">Location</th>
								<th className="border px-2 py-1">Observatory</th>
								<th className="border px-2 py-1">Depth</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td className="border px-2 py-1">
									<input type="date" className="border p-1 w-full" disabled />
								</td>
								<td className="border px-2 py-1">
									<input type="number" className="border p-1 w-full" disabled />
								</td>
								<td className="border px-2 py-1">
									<input type="text" className="border p-1 w-full" disabled />
								</td>
								<td className="border px-2 py-1">
									<input type="text" className="border p-1 w-full" disabled />
								</td>
								<td className="border px-2 py-1">
									<input type="text" className="border p-1 w-full" disabled />
								</td>
								<td className="border px-2 py-1">
									<input type="date" className="border p-1 w-full" disabled />
								</td>
								<td className="border px-2 py-1">
									<input type="number" className="border p-1 w-full" disabled />
								</td>
								<td className="border px-2 py-1">
									<input type="text" className="border p-1 w-full" disabled />
								</td>
								<td className="border px-2 py-1">
									<input type="text" className="border p-1 w-full" disabled />
								</td>
								<td className="border px-2 py-1">
									<input type="text" className="border p-1 w-full" disabled />
								</td>
							</tr>
						</tbody>
					</table>
					<div className="flex justify-end gap-4">
						<button onClick={() => setModalOpen(true)} className="bg-blue-600 text-white px-10 py-2 rounded">
							Add
						</button>
						<button onClick={() => setModalOpen(false)} className="bg-blue-600 text-white px-4 py-2 rounded">
							Close
						</button>
					</div>
				</div>
			</div>
		)
	);
}