import React from 'react';
import { useRegionalizationContext } from '../context/RegionalizationContext';
import { Title } from '../components/Title';
import { Navigation } from '../components/Navigation';

interface OpeningHoursProps {
  text: string;
  startHour: number;
  endHour: number;
}

const OpeningHours = ({ text, startHour, endHour }: OpeningHoursProps) => {
  return (
    <div className="opening-hours-container">
      <p>{text}</p>
      <span>
        Das {startHour}h até às {endHour}h
      </span>
    </div>
  );
};

export const MoreInfosScreen = () => {
  const {
    moreInfosText,
    pricesAndHours: { deliveryTimeWeekday, deliveryTimeWeekEndAndHolidays },
  } = useRegionalizationContext();

  return (
    <>
      <Title title={moreInfosText} />

      <OpeningHours
        text="Segunda a Sexta:"
        startHour={deliveryTimeWeekday.start}
        endHour={deliveryTimeWeekday.end}
      />

      <OpeningHours
        text="Fins de Semana e Feriados:"
        startHour={deliveryTimeWeekEndAndHolidays.start}
        endHour={deliveryTimeWeekEndAndHolidays.end}
      />

      <Navigation moreInfosScreen />
    </>
  );
};