import { Button, TimelineBody, TimelineContent, TimelineItem, TimelinePoint, TimelineTime, TimelineTitle } from "flowbite-react";
import { Timeline } from "flowbite-react";
import { FC } from "react";
import { HiArrowNarrowRight } from "react-icons/hi";
import { twMerge } from "tailwind-merge";

type Props = {
    messages: any[];
}

const TicketMessageThread: FC<Props> = ({ messages }) => {
    return (
        <Timeline
            className="mt-6"
            theme={
                {
                    item: { root: { vertical: "mb-4 ml-6" } }
                }
            }
        >
            {messages.map((message) => (
                <TimelineItem key={message.id}
                    className={twMerge("p-2 mb-0 border-b-2 border-gray-200", message.client?.name ? "bg-gray-100" : "bg-gray-50")}
                    theme={{
                        content: {
                            body: {
                                base: "mb-0"
                            }
                        }
                    }}
                >
                    <TimelinePoint />
                    <TimelineContent>
                        <TimelineTime>{message.created_at}</TimelineTime>
                        <TimelineTitle className="text-sm font-medium mb-0">Replied by : <span className="font-bold text-gray-500">
                            {message.staff?.name}
                            {message.client?.name}
                        </span></TimelineTitle>
                        <TimelineBody>
                            {message.message}
                        </TimelineBody>
                    </TimelineContent>
                </TimelineItem>
            ))}
        </Timeline>
    );
};

export default TicketMessageThread;