import React from 'react';
import styled from 'styled-components';

import { PeriodOfDay } from '@rpg-engine/shared';
import AfternoonGif from './gif/afternoon.gif';
import MorningGif from './gif/morning.gif';
import NightGif from './gif/night.gif';

export interface IPeriodOfDayDisplayProps {
  periodOfDay: PeriodOfDay;
}

export const DayNightPeriod: React.FC<IPeriodOfDayDisplayProps> = ({
  periodOfDay,
}) => {
  const periodOfDaySrcFiles = {
    [PeriodOfDay.Morning]: MorningGif,
    [PeriodOfDay.Afternoon]: AfternoonGif,
    [PeriodOfDay.Night]: NightGif,
  };

  return (
    <GifContainer>
      <img src={periodOfDaySrcFiles[periodOfDay]} />
    </GifContainer>
  );
};

const GifContainer = styled.div`
  width: 100%;

  img {
    width: 67%;
  }
`;
