import {
  Section,
  SectionStartPart,
  SectionTitle,
  UsersList,
  Right,
} from './TableCard.styled';

const TableCard = ({ table, onNavigate }) => {
  const handleClick = () => {
    if (onNavigate) {
      onNavigate(table.id);
    }
  };

  return (
    <div key={table.sheet + '_' + table?.direction}>
      <Section onClick={handleClick}>
        <SectionStartPart>
          <div className="for-img-table">
            <div className="img-table"></div>
          </div>
          <SectionTitle>
            <h2>{table.name}</h2>
            <h2>{table?.direction}</h2>
            {/* <UsersList>
              <div className="img-user"></div>
            </UsersList> */}
          </SectionTitle>
        </SectionStartPart>
        <Right />
      </Section>
    </div>
  );
};

export default TableCard;