1import {
 2    Badge,
 3    Card,
 4    CardContent,
 5    CardHeader,
 6    ScrollArea,
 7    Separator,
 8} from "@marzneshin/components";
 9import type { NodeType } from "..";
10import { useNodesLog } from "..";
11import { cn } from "@marzneshin/utils";
12import type { FC } from "react";
13import { useTranslation } from "react-i18next";
14
15interface LogContainerProps {
16    node: NodeType;
17}
18
19export const LogContainer: FC<LogContainerProps> = ({ node }) => {
20    const { logs, status, logsDiv } = useNodesLog(node);
21    const { t } = useTranslation();
22
23    return (
24        <Card className="h-full w-full">
25            <CardContent className="flex flex-col p-2 h-full w-full">
26                <CardHeader className="flex flex-row justify-between items-center p-2">
27                    <p className="capitalize font-header">
28                        {t("page.nodes.settings.log-container.title")}
29                    </p>
30                    <div className="flex flex-row gap-2 justify-center items-center">
31                        <Badge
32                            variant={status === "closed" ? "destructive" : "default"}
33                            className={cn("flex justify-center items-center w-full h-6 capitalize hover:text-primary-foreground", { "bg-success text-success-foreground": (status !== "closed") })}
34                        >
35                            {status}
36                        </Badge>
37                    </div>
38                </CardHeader>
39                <ScrollArea
40                    className="flex p-2 h-full max-h-[calc(100vh-20rem)] rounded-md bg-secondary text-primary w-full overflow-auto"
41                    ref={logsDiv}
42                >
43                    {logs.map((log: string, index: number) => (
44                        <div key={log} className="w-full">
45                            <p className="font-mono text-[0.7rem] text-primary my-1 break-all rounded-sm p-[1px] hover:bg-gray-300 dark:hover:bg-gray-900">
46                                {log}
47                            </p>
48                            {index !== logs.length - 1 && (
49                                <Separator className="bg-white dark:bg-gray-700" />
50                            )}
51                        </div>
52                    ))}
53                </ScrollArea>
54            </CardContent>
55        </Card>
56    );
57};