import React, { useState } from 'react';
import Table from '../../components/Table/HotelTable';
import { useContext } from 'react';
import { langContext } from '../../context/LenguageContext'; 

export default function PropertiesPage() {
  const { lang } = useContext(langContext);
  const [properties, setProperties] = useState([
    {
      propertyId: '0000001',
      name: 'Hacienda San Angel',
      areas: 'Hotel, Restaurant',
    },
  ]);

  //Función para añadir una propiedad falsa (puedes adaptarla luego)
  const handleAddProperty = () => {
    const newId = String(properties.length + 1).padStart(7, '0'); // e.g. "0000002"
    const newProperty = {
      propertyId: newId,
      name: `New Property ${newId}`,
      areas: 'TBD',
    };
    setProperties([...properties, newProperty]);
  };

  const columns = [
    {
      key: 'propertyId',
      header: lang === "en" ? 'PROPERTY ID' : 'ID DE PROPIEDAD',
      render: (value, row) => (
        <a href={`/app/properties/${value}`}>{value}</a>
      ),
    },
    {
      key: 'name',
      header: lang === "en" ? 'NAME' : 'NOMBRE',
    },
    {
      key: 'areas',
      header: lang === "en" ? 'AREAS' : 'ÁREAS',
    },
  ];

  //Agregamos la fila del botón como última fila (solo visual)
  const tableData = [...properties, { propertyId: 'add-row' }];

  return (
    <div className="properties-container">
      <h2>{lang === "en" ? "Properties" : "Propiedades"}</h2>
      <Table
        columns={columns.map((col) => ({
          ...col,
          render: (value, row) => {
            if (row.propertyId === 'add-row') {
              if (col.key === 'propertyId') {
                return (
                  <button onClick={handleAddProperty} className="add-button">
                    + {lang === "en" ? "Add property…" : "Agregar propiedad…"}
                  </button>
                );
              }
              return null;
            }

            //render personalizado
            return col.render
              ? col.render(row[col.key], row)
              : row[col.key];
          },
        }))}
        data={tableData}
      />
    </div>
  );
}



// export default function Properties(){
//     <h2>Properties</h2>
// };

// import React from 'react';
// import Table from '../../components/Table/HotelTable'; // tu componente reutilizable

// export default function PropertiesPage() {
//   const columns = [
//     {
//       key: 'propertyId',
//       header: 'PROPERTY ID',
//       render: (value, row) => {
//         if (value === 'add') {
//           return <span style={{ fontWeight: 'bold' }}>+ Add property…</span>;
//         }
//         return <a href={`/properties/${value}`}>{value}</a>;
//       },
//     },
//     {
//       key: 'name',
//       header: 'NAME',
//       render: (value, row) => row.propertyId === 'add' ? null : value,
//     },
//     {
//       key: 'areas',
//       header: 'AREAS',
//       render: (value, row) => row.propertyId === 'add' ? null : value,
//     },
//   ];

//   const data = [
//     {
//       propertyId: '0000001',
//       name: 'Hacienda San Angel',
//       areas: 'Hotel, Restaurant',
//     },
//     {
//       propertyId: 'add',
//       name: '+ Add property…',
//       areas: '',
//     },
//   ];

//   return (
//     <div className="properties-container">
//       <h2>Properties</h2>
//       <Table columns={columns} data={data} />
//     </div>
//   );
// }
