1import {
 2  Badge,
 3  Card,
 4  CardContent,
 5  CardHeader,
 6  ScrollArea,
 7  Separator,
 8} from "@marzneshin/common/components";
 9import type { NodeType } from "..";
10import { useNodesLog } from "..";
11import type { FC } from "react";
12import { useTranslation } from "react-i18next";
13
14interface LogContainerProps {
15  node: NodeType;
16  backend: string;
17}
18
19export const LogContainer: FC<LogContainerProps> = ({ node, backend }) => {
20  const { logs, status, logsDiv } = useNodesLog(node, backend);
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">{`${backend} ${t("logs")}`}</p>
28          <div className="flex flex-row gap-2 justify-center items-center">
29            <Badge
30              className="capitalize"
31              variant={status === "closed" ? "destructive" : "positive"}
32            >
33              {status}
34            </Badge>
35          </div>
36        </CardHeader>
37        <ScrollArea
38          className="flex p-2 h-full max-h-[calc(100vh-20rem)] rounded-md bg-secondary text-primary w-full overflow-auto"
39          ref={logsDiv}
40        >
41          {logs.map((log: string, index: number) => (
42            <div key={log} className="w-full">
43              <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">
44                {log}
45              </p>
46              {index !== logs.length - 1 && (
47                <Separator className="bg-white dark:bg-gray-700" />
48              )}
49            </div>
50          ))}
51        </ScrollArea>
52      </CardContent>
53    </Card>
54  );
55};