import React from 'react'

import type { Meta } from '@storybook/react'
import { ChatMessage, Icons, Avatar } from '../components'

const meta = {
  title: 'Display/ChatMessage',
  component: ChatMessage,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof ChatMessage>

export default meta

const chat = [
  {
    send: 'me',
    name: 'Alice',
    message:
      'Olá, tudo bem? Meu nome é Alice e falo em nome do banco Bradesco. Eu gostaria de falar com Bob',
    time: '09:50',
    emotion: (
      <Avatar
        sx={{
          backgroundColor: '#FFF',
          border: '1px solid  rgb(255, 195, 0)',
          m: '5px',
        }}
      >
        <Icons icon="faceNeutral" scale="large" color="warning" />
      </Avatar>
    ),
    emotionReplay: (
      <Avatar
        sx={{
          backgroundColor: '#FFF',
          border: '1px solid  rgb(219, 102, 25)',
          m: '5px',
        }}
      >
        <Icons icon="faceHappy" scale="large" color="primary" />
      </Avatar>
    ),
  },
  {
    send: 'replay',
    name: 'Bob',
    message: 'Oi, estou bem, obrigado! E você?',
    time: '10:05',
  },
  {
    send: 'me',
    name: 'Alice',
    message: 'Estou ótima, obrigada por perguntar!',
    time: '10:10',
  },
  {
    send: 'replay',
    name: 'Bob',
    message: 'Que bom ouvir isso!',
    time: '10:15',
    emotion: (
      <Avatar
        sx={{
          backgroundColor: '#FFF',
          border: '1px solid  rgb(219, 102, 25)',
          m: '5px',
        }}
      >
        <Icons icon="faceHappy" scale="large" color="primary" />
      </Avatar>
    ),
  },
]

export const ChatMessageBasic = () => {
  return (
    <>
      <ChatMessage data={chat} />
    </>
  )
}