import React from "react";
import Button from "./Button.jsx";
// import styled from "styled-components";

export default function Table({ head, contents, contentKey, onClick, className, view, offset, limit}) {
  const [modalOpen, setModalOpen] = React.useState(false);
  const openModal = () => {
    setModalOpen(true);
  };

  const [modalOpen2, setModalOpen2] = React.useState(false);
  const openModal2 = () => {
    setModalOpen2(true);
  };
  

  const buttonPrint = () => {
    if(view == 'mySenior'){
      return(
      <td>
        <Button
          className={"btn-small gray-btn"}
          btnName={"보기"}
          onClick={openModal}
        />
      </td>)
    }
    else if(view == 'allSenior'){
      return(
        <>
          <td>
          <Button
              className={"btn-small gray-btn"}
              btnName={"선택"}
              onClick={openModal2}
            />
          </td>
          <td>
            <Button
              className={"btn-small gray-btn"}
              btnName={"보기"}
              onClick={openModal}
            />
            </td>
          </>
      )
    }
  }
  
  return (
    <table className={className}>
      <thead>
        <tr>
          {head.map((i) => {
            return <th>{i}</th>;
          })}
        </tr>
      </thead>
      <tbody>
        {contents.slice(offset, offset + limit).map((i, index) => {
          return (
            <tr key={index}>
            {/* //   <td>{i.rn}</td>
            //   <td>{i.user_name}</td>
            //   <td>{i.user_phonenumber}</td>
            //   <td>{i.user_gender}</td>
            //   <td>{i.user_birth}</td>
            //   <td>{i.user_address}</td>
            //   {buttonPrint()} */}
            {contentKey.map((kes) => {
                return (
                  <>
                  <td onClick={onClick}>{i[kes]}</td>
                  </>
                )
            })}
            {buttonPrint()}
            </tr>
          );
        })}
      </tbody>
    </table>
    
  );
}


// const TableStyled = styled.table`
//   border-top: 2px solid #2d303f;
//   border-bottom: 1px solid #e4dccf;
//   /* &:hover {
//     background-color: #e4dccf;
//   } */
// `;

// const TrStyled = styled.tr`
//   cursor: pointer;
// `;

// const ThStyled = styled.th`
//   padding: 1rem 0;
//   font-weight: bold;
//   background-color: #f0ebe3;
//   font-size: 1.4rem;
//   text-align: center;
// `;

// const TdStyled = styled.td`
//   padding: 1rem 0;
//   border-top: 1px solid #ececec;
//   text-align: center;
//   font-size: 1.3rem;
//   background-color: #ffffff;
// `;