import React, { useState } from "react";
import { cn } from "../../../lib/cn";
import LaTextContainer from "./LaTextContainer";
// import FullLatexRenderer from "./FullLatexRenderer";

export interface StatementData {
    id?: number;
    name?: string;
    tags?: string[];
    timeLimit?: number;
    memoryLimit?: number;
    legend?: string;
    input?: string;
    output?: string;
    sampleTests?: { input: string; output: string }[];
    notes?: string;
}



const Statement: React.FC<StatementData> = ({
    id,
    name,
    tags,
    timeLimit = 1000,
    memoryLimit = 256 * 1024 * 1024,
    legend = "",
    input = "",
    output = "",
    sampleTests = [],
    notes = "",
}) => {


    return (
        <div className="flex flex-col w-full h-full bg-red-3001 overflow-y-scroll medium-scrollbar pl-[20px] pr-[12px] gap-[20px]">
            <div>
                <p className="h-[50px] text-[40px] font-bold text-liquid-white">{name}</p>
                <p className="h-[23px] text-[18px] font-bold text-liquid-light">Задача #{id}</p>
            </div>

            <div className="flex gap-[10px] w-full flex-wrap">
                {tags && tags.map((v, i) => <div key={i} className="px-[16px] py-[8px] rounded-full bg-liquid-lighter ">{v}</div>)}
            </div>

            <div className="flex flex-col">
                <p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">ограничение по времени на тест:</span> {timeLimit / 1000} секунда</p>
                <p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">ограничение по памяти на тест:</span> {memoryLimit / 1024 / 1024} мегабайт</p>
                <p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">ввод:</span> стандартный ввод</p>
                <p className="text-liquid-white h-[20px] text-[18px] font-bold"><span className="text-liquid-light">вывод:</span> стандартный вывод</p>
            </div>

            <div className="flex flex-col gap-[10px]">
                <LaTextContainer content={legend} />
            </div>
            <div className="flex flex-col gap-[10px]">
                <div>Входные данные</div>
                <LaTextContainer content={input} />
            </div>
            <div className="flex flex-col gap-[10px]">
                <div>Выходные данные</div>
                <LaTextContainer content={output} />
            </div>

            <div>
                <div>{sampleTests.length == 1 ? "Пример" : "Примеры"}</div>
                <div className="flex flex-col gap-[10px]">

                {sampleTests.map((v, i) =>
                    <div key={i} className="flex flex-col gap-[10px]">
                        <div>Входные данные</div>
                        <div>{v.input}</div>
                        <div>Выходные данные</div>
                        <div>{v.output}</div>
                    </div>
                )}
                </div>
            </div>
            <div className="flex flex-col gap-[10px]">
                <div>Примечание</div>
                <LaTextContainer content={notes} />
                <div>Автор: Jacks</div>
            </div>
        </div>

    );
};

export default Statement;