import styled from 'styled-components';
import React from 'react';
import ClearDate from './ClearDate';

import { format } from 'date-fns';
import { ReactElement, useMemo } from 'react';

interface Props {
  date?: Date;
  clearDate: () => void;
  promptText: string | ReactElement;
}

function PromptOrClearDate({ date, clearDate, promptText }: Props) {
  const selectedDate = useMemo(() => {
    if (!date) {
      return '';
    }
    return format(date, 'dd MMMM yyyy');
  }, [date]);

  return (
    <Container>
      {date && (
        <>
          <SelectedDate>{selectedDate}</SelectedDate>
          <ClearDate onClick={clearDate} />
        </>
      )}
      {!date && <Prompt>{promptText}</Prompt>}
    </Container>
  );
}

const SelectedDate = styled.span`
  font-size: 15px;
  font-weight: bold;
  font-family: 'Lato', sans-serif;
  color: #55d5f2;
`;

export const Prompt: any = styled.span`
  color: #feba30;
  font-size: 15px;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  text-align: center;
  width: 100%;
`;

const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 90px;
  padding: 0 30px;
`;

export default PromptOrClearDate;
