import React from 'react';
import { Link } from 'react-router-dom';
import { FaExternalLinkAlt } from 'react-icons/fa';
import './Table.css';

export default function Table({ columns, data }) {
  return (
    <table className="custom-table">
      <thead>
        <tr>
          {columns.map((col) => (
            <th key={col.key} style={col.headerStyle || {}}>{col.header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {columns.map((col, colIndex) => (
              <td key={colIndex}>
                {col.render
                  ? col.render(row[col.key], row)
                  : col.key === 'propertyId'
                  ? (
                    <Link
                      to={`/app/properties/${row[col.key]}`}
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '6px',
                        textDecoration: 'none',
                        color: '#003366', 
                        fontWeight: 'bold'
                      }}
                    >
                      {row[col.key]}
                      <FaExternalLinkAlt size={12} />
                    </Link>
                  )
                  : row[col.key]}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// import React from 'react';
// import { Link } from 'react-router-dom';
// import { FaArrowRight } from 'react-icons/fa'; 
// import './Table.css';

// export default function Table({ columns, data }) {
//   return (
//     <table className="custom-table">
//       <thead>
//         <tr>
//           {columns.map((col) => (
//             <th key={col.key}>{col.header}</th>
//           ))}
//         </tr>
//       </thead>
//       <tbody>
//         {data.map((row, rowIndex) => (
//           <tr key={rowIndex}>
//             {columns.map((col, colIndex) => (
//               <td key={colIndex}>
//                 {col.render
//                   ? col.render(row[col.key], row)
//                   : col.key === 'propertyId'
//                   ? (
//                     <Link to={`/app/properties/${row[col.key]}`} style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
//                       {row[col.key]}
//                       <FaArrowRight size={12} />
//                     </Link>
//                   )
//                   : row[col.key]}
//               </td>
//             ))}
//           </tr>
//         ))}
//       </tbody>
//     </table>
//   );
// }

// import React from 'react';
// import { Link } from 'react-router-dom';
// import './Table.css';

// export default function Table({ columns, data }) {
//   return (
//     <table className="custom-table">
//       <thead>
//         <tr>
//           {columns.map((col) => (
//             <th key={col.key}>{col.header}</th>
//           ))}
//         </tr>
//       </thead>
//       <tbody>
//         {data.map((row, rowIndex) => (
//           <tr key={rowIndex}>
//             {columns.map((col, colIndex) => (
//               <td key={colIndex}>
//                 {col.render
//                   ? col.render(row[col.key], row) // usar render si está definido
//                   : col.key === 'propertyId'      
//                   ? <Link to={`/app/properties/${row[col.key]}`}>{row[col.key]}</Link>
//                   : row[col.key]}
//               </td>
//             ))}
//           </tr>
//         ))}
//       </tbody>
//     </table>
//   );
// }


// import React from 'react';
// import './Table.css';

// export default function Table({ columns, data }) {
//   return (
//     <table className="custom-table">
//       <thead>
//         <tr>
//           {columns.map((col) => (
//             <th key={col.key}>{col.header}</th>
//           ))}
//         </tr>
//       </thead>
//       <tbody>
//   {data.map((row, rowIndex) => (
//     <tr key={rowIndex}>
//       {columns.map((col, colIndex) => (
//         <td key={colIndex}>
//           {col.render
//             ? col.render(row[col.key], row)  // usar render si está definido
//             : row[col.key]}
//         </td>
//       ))}
//     </tr>
//   ))}
// </tbody>

//     </table>
//   );
// }
