export default () => {
  const { schedules, calendar } = usePage();
  const { data } = schedules;
  const offset = 0;
  const perPage = 14;

  function changeOffset(val) {
     offset += val;
     if (offset > calendar.length) {
      offset = calendar.length;
     } else if (offset < 0) {
      offset = 0;
     }
  }

  return (
    <Layout>
      <Helmet title="Contacts" />
      <div>
        <h1 className="mb-8 font-bold text-3xl">График работы</h1>
        <div className="mb-6 flex justify-between items-center">
        </div>
        <div className="bg-white rounded shadow overflow-x-auto">
           <button onClick={() => changeOffset(-perPage)}>-</button>
           {calendar.slice(offset, offset + perPage).map(({date, dayIndex}) => <div key={dayIndex}>{date}</div>)}
           <button onClick={() => changeOffset(perPage)}>+</button>
        </div>
      </div>
    </Layout>
  );
};