import { Divider } from 'components/divider';
import { Container, Row } from 'components/layout';
import { Text } from 'components/text';
import React from 'react';
import { getMessageDividerDateTime } from 'utils/dateTime';

export const MessageDivider: React.FC<MessageDividerProps> = ({ createdAt }) => {
  return (
    <Row px="m" my="2xs" alignItems="center">
      <Divider size={1} colorVariant="divider-02" directionVariant="horizontal" />
      <Container>
        <Text mx="xs" variant="caption">
          {getMessageDividerDateTime(createdAt)}th
        </Text>
      </Container>
      <Divider size={1} colorVariant="divider-02" directionVariant="horizontal" />
    </Row>
  );
};

export interface MessageDividerProps {
  createdAt: Date;
}