import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import Link from "next/link";
import {cn} from "@/lib/utils";

type ChatListItemProps = {
    selected?: boolean;
    name: string;
    sessionChatId: string;
    lastMessage?: string | null;
    avatarUrl: string | null;
}


export const dummyList: ChatListItemProps[] = [
    {
        name: "Dlamini Lindelwa",
        sessionChatId: "chat-id-2",
        lastMessage: "This is the last message",
        avatarUrl: null
    },
    {
        name: "Sifiso Lindelwa",
        sessionChatId: "chat-id-4",
        lastMessage: "This is the last message. It is very long",
        avatarUrl: null
    },
    {
        name: "Sifiso Lindelwa",
        sessionChatId: "chat-id-6",
        avatarUrl: null
    },
    {
        name: "Dlamini Lindelwa",
        sessionChatId: "chat-id-8",
        lastMessage: "This is the last message. It is very long",
        avatarUrl: null
    },
]

export default function ChatListItem(props: ChatListItemProps) {
    return (
        <Link href={`/sessions/${props.sessionChatId}`}
              className={cn("flex flex-row border-t gap-2 p-2 hover:bg-gray-200 border-0 rounded-xl", {
                  "bg-gray-200": Boolean(props.selected)
              })}>

            <Avatar>
                <AvatarImage src="https://github.com/shadcn.png"/>
                <AvatarFallback>{props.name?.charAt(0) || "TC"}</AvatarFallback>
            </Avatar>

            <div className={"flex flex-col justify-center"}>
                <p className={"font-bold text-gray-600 line-clamp-1"}>{props.name}</p>
                <p className={"line-clamp-2 text-xs text-gray-500"}>{props.lastMessage}</p>
            </div>
        </Link>
    )
}