import React from 'react'
import { Input } from '../ui/input'
import { InputGroup, InputGroupAddon, InputGroupButton } from '../ui/input-group'
import { Textarea } from '../ui/textarea'

export default function ChatBox() {
  return (
    <div className='flex flex-col'>
      <div className='grow flex flex-col'>
        CHAT MESSAGES
        <div className='p-1 rounded-2xl border max-w-1/2 self-start'>Placeholder message</div>
        <div className='p-1 rounded-2xl border max-w-1/2 self-end'>Placeholder message</div>
      </div>
      <div>
        <div className="grid w-full max-w-sm gap-6">
          <InputGroup>
            <Textarea
              data-slot="input-group-control"
              className="flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm"
              placeholder="Message..."
            />
            <InputGroupAddon align="block-end">
              <InputGroupButton className="ml-auto" size="sm" variant="default">
                Send
              </InputGroupButton>
            </InputGroupAddon>
          </InputGroup>
        </div>
      </div>

    </div>
  )
}