import React, { useState, useEffect } from 'react';
import axios from 'axios';
import styled from 'styled-components';

const Container = styled.div`
  margin: 20px;
  font-family: Arial, sans-serif;
`;

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
`;

const Th = styled.th`
  background-color: #468bff;
  color: white;
  padding: 10px;
  text-align: center;
`;

const Td = styled.td`
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
`;

const Tr = styled.tr`
  &:nth-child(even) {
    background-color: #f2f2f2;
  }
`;

const H1WithIcon = styled.h1`
  display: flex;
  align-items: center;
  img {
    margin-left: 20px;
  }
`;

const NoOne = styled.h1`
  align-items: center;
  text-align:center;
  img {
    margin-left: 20px;
  }
`;

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://online.skbkit.ru/api/online');
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();

    // Обновление данных каждые 5 секунд
    const intervalId = setInterval(fetchData, 5000);

    return () => {
      clearInterval(intervalId); // Очистка интервала при размонтировании компонента
    };

  }, []);

  return (
    <Container>
      {/* <h1>Кто сейчас в СКБ?</h1> */}
      <H1WithIcon>
        Кто сейчас в СКБ?
        <img src="/kit.png" alt="Icon" width="100" height="100" />
      </H1WithIcon>

      <Table>
        <thead>
          <tr>
            <Th>№</Th>
            <Th>ФИО</Th>
            <Th>Лаборатория</Th>
            <Th>Время входа</Th>
			<Th>ОФис</Th>
          </tr>
        </thead>
        <tbody>

          {data.length > 0 && data.map((item, index) => (
            <Tr>
              <Td>{index + 1}</Td>
              <Td>{item.name}</Td>
              <Td>{item.lab}</Td>
              <Td>{item.timeIn}</Td>
              <Td>{item.officeName}</Td>
            </Tr>
          ))}
        </tbody>
      </Table>

      {data.length === 0 &&
        (
          <NoOne>Никого нет.</NoOne>
        )}

    </Container>
  );
};

export default App;