import { createContext, useContext, useEffect, useState } from 'react';
import { useConversationState } from '@/stores/ConversationContext';

import { Flex, Typography, Avatar } from 'antd';
import LocalTimeClock from './LocalTimeClock';

const MessagesHeader = () => {
  const { currentConversation } = useConversationState();
  return (
    <>
      <Flex gap={16}>
        {currentConversation.customer_name && <Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.customer_name}`} />}
        <Flex flex={'1'} justify='space-between'>
          <Flex vertical={true} justify='space-between'>
            <Typography.Text strong>{currentConversation.customer_name}</Typography.Text>
            <Typography.Text>{currentConversation.whatsapp_phone_number}</Typography.Text>
          </Flex>
          <Flex vertical={true} justify='space-between'>
            <Typography.Text>{/* <LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text> */}</Typography.Text>
            {/* <Typography.Text>{customerDateTime}</Typography.Text> */}
          </Flex>
        </Flex>
      </Flex>
    </>
  );
};
export default MessagesHeader;