1import { Badge, Card, CardContent, CardHeader, ScrollArea } from "@marzneshin/components"
 2import { NodeType, useNodesLog } from ".."
 3import { FC } from "react"
 4import { useTranslation } from "react-i18next"
 5
 6interface LogContainerProps {
 7    node: NodeType
 8}
 9
10export const LogContainer: FC<LogContainerProps> = ({ node }) => {
11    const { logs, status, logsDiv } = useNodesLog(node)
12    const { t } = useTranslation()
13    return (
14        <Card className="h-1/2">
15            <CardContent className="flex flex-col p-1 h-full" >
16                <CardHeader className="flex flex-row justify-between items-center p-2">
17                    <p className="capitalize font-header">{t('page.nodes.settings.log-container.title')}</p>
18                    <div className="flex flex-row gap-2 justify-center items-center">
19                        <Badge variant={status === "closed" ? "destructive" : "default"} className="flex justify-center items-center w-full h-6 capitalize">
20                            {status}
21                        </Badge>
22                    </div>
23                </CardHeader>
24                <ScrollArea className="flex p-2 m-1 h-full rounded-b-md divide-dashed divide-accent bg-secondary text-primary" ref={logsDiv}>
25                    {logs.map((log: string, i) => {
26                        return <p key={i} className="font-mono text-[0.7rem] text-primary">{log}</p>
27                    })}
28                </ScrollArea>
29            </CardContent>
30        </Card>
31    )
32}