Chat Messages Reverse

"use client";

import { useState } from "react";
import Chat, { type User } from "@/components/docs-components/chat";
import type { Message } from "@/components/docs-components/chat-message";
import IphoneFrame from "@/components/docs-components/iphone-frame"; // Import the frame

export function ChatMessagesReverse() {
  const users: User[] = [
    {
      name: "User1",
      avatar:
        "https://res.cloudinary.com/harshitproject/image/upload/v1746774430/member-five.png", // Replace with actual avatar URL
    },
    {
      name: "User2",
      avatar:
        "https://res.cloudinary.com/harshitproject/image/upload/v1746774430/member-four.png", // Replace with actual avatar URL
    },
  ];

  const [messages] = useState<Message[]>([
    {
      id: "n1",
      name: "User1",
      message: "Hey, what is the best component library?",
    },
    {
      id: "n2",
      name: "User2",
      message: "I think Solace UI is awesome it is simple and easy to use.",
    },
    {
      id: "n3",
      name: "User1",
      message: "So, it is reliable and has a clean design?",
    },
    {
      id: "n4",
      name: "User2",
      message: "Yes, exactly. It makes development a breeze.",
    },
  ]);

  return (
    <main className="flex flex-col items-center justify-center p-4 ">
      {/* Clipping Wrapper */}
      <div className="mx-auto overflow-hidden w-[300px] h-[360px] sm:w-[350px] sm:h-[420px]">
        <IphoneFrame>
          <Chat
            messages={messages}
            currentUser="User1"
            users={users} // Pass the users array with avatars
          />
        </IphoneFrame>

        <div
          className="
      absolute bottom-0 left-0 right-0 
      h-16 sm:h-20
      bg-gradient-to-b from-transparent 
      to-white dark:to-[#212121]
      pointer-events-none 
    "
          aria-hidden="true"
        ></div>
      </div>
    </main>
  );
}