Chat

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";

const chatContainerVariants = cva(
  "border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] font-pixel flex flex-col",
  {
    variants: {
      variant: {
        default: "bg-white dark:bg-[#2a2a2a]",
        retro: "bg-[#c0c0c0] dark:bg-[#1a1a1a]",
        terminal: "bg-black text-pixel-terminal",
      },
      size: {
        sm: "h-[300px] w-full max-w-[400px]",
        md: "h-[500px] w-full max-w-[600px]",
        lg: "h-[700px] w-full max-w-[800px]",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  },
);

const messageVariants = cva(
  "inline-block max-w-[80%] p-3 border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] break-words",
  {
    variants: {
      sender: {
        user: "bg-pixel-primary ml-auto",
        other: "bg-white dark:bg-[#3a3a3a] mr-auto",
        system: "bg-pixel-secondary mx-auto text-center",
      },
    },
    defaultVariants: {
      sender: "other",
    },
  },
);

export interface MessageType {
  id: string;
  text: string;
  sender: "user" | "other";
  username?: string;
  timestamp?: string;
  avatar?: string;

// ... (more code below)