import type { ChatCompletionMessageParam } from "openai/resources/index";
import { twMerge } from "tailwind-merge";
import { User } from "lucide-react";
import Stack from "../../layout/Stack";
import Row from "../../layout/Row";
import Card from "../Card";
import Border from "../Border";
import Img from "../../layout/Img";
import type { VoiceTranscriptionParams } from "./types";

type Props = VoiceTranscriptionParams & {
    history: ChatCompletionMessageParam;
    user_image_url?: string;
};

export default function AIPromptHistoryUserCard({
    history,
    user_image_url,
    ...props
}: Props) {
    return (
        <Row className="w-full items-start justify-end flex-nowrap">
            <Card
                className={twMerge(
                    "bg-background-dark text-foreground-dark dark:!bg-background-light dark:text-foreground-light",
                    "twui-llm-user-prompt-history-block",
                )}
            >
                <Stack className="twui-llm-chat-block">
                    {history.content?.toString()}
                </Stack>
            </Card>

            {user_image_url ? (
                <Img
                    alt="Prompting user"
                    size={30}
                    circle
                    src={user_image_url}
                />
            ) : (
                <Border className="w-10 h-10 rounded-full p-2 items-center justify-center">
                    <User />
                </Border>
            )}
        </Row>
    );
}