import React, { useState, useRef, useEffect } from 'react';
import { Head, Link } from '@inertiajs/react';
import {
ChevronLeft,
MoreVertical,
Send,
Paperclip,
Image as ImageIcon,
Smile,
CheckCheck,
Mic
} from 'lucide-react';
export default function EmployerChatDetail({ id }) {
const [message, setMessage] = useState('');
const [messages, setMessages] = useState([
{ id: 1, sender: 'them', text: 'Hello! Is the site supervisor position still available?', time: '10:30 AM' },
{ id: 2, sender: 'me', text: 'Hi Sarah! Yes, it is. We are currently reviewing applications.', time: '10:32 AM' },
{ id: 3, sender: 'them', text: 'Great! I have over 8 years of experience in Dubai. Would you like me to send my CV?', time: '10:35 AM' },
{ id: 4, sender: 'me', text: 'That would be excellent. Please send it over here.', time: '10:36 AM' },
{ id: 5, sender: 'them', text: 'Sure, here it is. I also have pediatric first aid certification.', time: '10:40 AM' },
]);
const messagesEndRef = useRef(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};
useEffect(() => {
scrollToBottom();
}, [messages]);
const handleSend = (e) => {
if (e) e.preventDefault();
if (!message.trim()) return;
const newMessage = {
id: messages.length + 1,
sender: 'me',
text: message,
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
};
setMessages([...messages, newMessage]);
setMessage('');
};
// Mock data for the specific chat
const chatInfo = {
id: id,
name: 'Sarah Connor',
initial: 'S',
online: true,
role: 'Site Supervisor'
};
return (