"use client";

import React, { useState } from 'react';

import { motion, AnimatePresence } from 'framer-motion';

import { cn } from "@/lib/utils";

export interface ChatMessageProps {

className?: string;

message?: string;

timestamp?: string;

avatarUrl?: string;

}

export function ChatMessage({

className,

message = "Every component now renders for real.",

timestamp = "April 20, 4:20 AM",

avatarUrl = "https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&w=64&h=64"

}: ChatMessageProps) {

const [showTime, setShowTime] = useState(false);

return (

<div className={cn("flex items-end gap-3 font-sans w-full max-w-[400px]", className)}>

<img

src={avatarUrl}

alt="Avatar"

className="w-9 h-9 rounded-full object-cover shrink-0 select-none shadow-sm"

/>

<div className="flex flex-col items-start w-full">

<button

onClick={() => setShowTime(!showTime)}

className="text-left bg-zinc-100 hover:bg-zinc-200 dark:bg-gradient-to-b dark:from-[#1C1C1E] dark:to-[#0A0A0C] border border-black/5 dark:border-white/10 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] dark:hover:border-white/20 text-zinc-900 dark:text-[#F5F5F7] px-4 py-3 rounded-[20px] rounded-bl-[8px] text-[15px] font-matter leading-relaxed transition-all active:scale-[0.98] shadow-sm relative"

>

{message}

</button>

<AnimatePresence>

{showTime && (

<motion.div

initial={{ height: 0, opacity: 0 }}

animate={{ height: 'auto', opacity: 1 }}

exit={{ height: 0, opacity: 0 }}

transition={{ duration: 0.2, ease: "easeOut" }}

className="overflow-hidden w-full"

>

<div className="pt-1.5 pl-2 text-[11px] font-mono uppercase tracking-wider text-zinc-500 dark:text-[#86868B]">

{timestamp}

</div>

</motion.div>

)}

</AnimatePresence>

</div>

</div>

);

}