import React, { FC } from 'react'
import { useState } from 'react'
import CheckBox from '../checkbox'

/* Definimos los tipos de datos que seran pasados a este componente */
export interface TableListItemProps extends React.HTMLAttributes<HTMLTableRowElement> {
  data: Array<string>
  buttons?: Array<JSX.Element>
  selectable?: boolean,
  index?: any,
  disable? : boolean,
  checked? : boolean
}

const TableItem: FC<TableListItemProps> = (props) => {
    /* Deestructurar props para recibir las variables que necesitamos */
  const { selectable, data, disable ,buttons, checked ,index } = props
  
  const [check, setIsChecked] = useState( checked ? true : false)
  return (
    <tr {...props} >
      {selectable &&
        <td>
          <CheckBox
          index={index} 
          handleCheck={setIsChecked}
          checked = {check}
          
          />
        </td>}
      {data?.map((label, index) => (<td key={index}><span>{label}</span></td>))}
      <td>
        {buttons}
      </td>
    </tr>
  )
}

export default TableItem
