import React from "react";
import { useAtom } from "jotai";
import { TranscribeAtom } from "../Variables";

function TranscribePage() {
    const [transcribe, setTranscribe] = useAtom(TranscribeAtom);
    return (
        <div className="p-5 pl-10 flex flex-col h-full">
            <p className="text-xl font-semibold text-primary-950 mb-5">Transcript of speech</p>
            <div className="h-full overflow-y-scroll noScrollBars">
                {transcribe.map((item, index) => {
                    if (item?.isCommand) {
                        return (
                            <p key={index} className="bg-primary-100 rounded-lg p-2 my-1">
                                {`>>`} {item?.msg}
                            </p>
                        );
                    } else {
                        return (
                            <p key={index} className="">
                                {item?.msg}
                            </p>
                        );
                    }
                })}
            </div>
        </div>
    );
}

export default TranscribePage;