import React from "react";
import { useNavigate } from 'react-router-dom';
import Table from "../../components/Table/HotelTable";
import { useContext } from "react";
import { langContext } from "../../context/LenguageContext";

export default function RoomManagement() {
  const navigate = useNavigate();
  const { lang } = useContext(langContext);

  const columns = [
    {
      header: lang === "en" ? "ROOM ID" : "ID DE HABITACIÓN",
      key: "id",
      render: (value) => (
        <span
          onClick={() => navigate('/app/settings/settings-id')}
          style={{
            color: '#b42a00ff',
            cursor: 'pointer',
            textDecoration: 'underline',
            fontWeight: 'bold'
          }}
        >
          {value}
        </span>
      ),
    },
    { header: lang === "en" ? "ROOM NAME" : "NOMBRE DE HABITACIÓN", key: "name" },
    { header: lang === "en" ? "GUEST" : "HUÉSPED", key: "guest" },
    { header: lang === "en" ? "BED TYPE" : "TIPO DE CAMA", key: "bedType" },
    { header: lang === "en" ? "QUANTITY" : "CANTIDAD", key: "quantity" },
  ];

  const data = [
    {
      id: "0000001",
      name: "San Miguel Presidencial",
      guest: "02",
      bedType: "KING SIZE",
      quantity: "01",
    },
    {
      id: "0000002",
      name: "Angels View",
      guest: "02",
      bedType: "KING SIZE",
      quantity: "01",
    },
    {
      id: "0000003",
      name: "Angels Dome",
      guest: "02",
      bedType: "QUEEN SIZE",
      quantity: "01",
    },
    {
      id: "0000004",
      name: "Celestial",
      guest: "04",
      bedType: "QUEEN SIZE",
      quantity: "01",
    },
  ];

  return (
    <div className="room-management">
      <h2>{lang === "en" ? "Room management" : "Gestión de habitaciones"}</h2>
      <Table columns={columns} data={data} />
    </div>
  );
}
