import { jsx, jsxs } from 'react/jsx-runtime';
import { cn } from '../../../utils/cn.js';
import 'react';
import { messageTheme } from './Message.theme.js';
import { Button } from '../Button/Button.js';
import { ExclamationCircleIcon, CheckIcon, ClockIcon } from '@heroicons/react/16/solid';

const DoubleCheck = ({ className }) => (jsxs("span", { className: cn("inline-flex items-center -space-x-2", className), children: [jsx(CheckIcon, { className: "size-3.5" }), jsx(CheckIcon, { className: "size-3.5" })] }));
const MessageStatusIndicator = ({ status, readAt, onRetry, className, }) => {
    if (!status)
        return null;
    const statusConfig = {
        sending: {
            icon: jsx(ClockIcon, { className: "size-3.5" }),
            style: messageTheme.statusSending,
            label: "Sending",
        },
        sent: {
            icon: jsx(CheckIcon, { className: "size-3.5" }),
            style: messageTheme.statusSent,
            label: "Sent",
        },
        delivered: {
            icon: jsx(DoubleCheck, {}),
            style: messageTheme.statusDelivered,
            label: "Delivered",
        },
        read: {
            icon: jsx(DoubleCheck, {}),
            style: messageTheme.statusRead,
            label: readAt
                ? `Read ${typeof readAt === "string" ? readAt : readAt.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`
                : "Read",
        },
        failed: {
            icon: jsx(ExclamationCircleIcon, { className: "size-3.5" }),
            style: messageTheme.statusFailed,
            label: "Failed",
        },
    };
    const config = statusConfig[status];
    return (jsxs("div", { className: cn(messageTheme.statusStyle, config.style, className), "aria-label": config.label, children: [config.icon, status === "failed" && onRetry && (jsx(Button, { variant: "link", color: "danger", size: "sm", onClick: onRetry, className: "text-xs px-0 h-auto", "aria-label": "Retry sending message", children: "Retry" }))] }));
};

export { MessageStatusIndicator };
