import { Button } from '@renderer/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@renderer/components/ui/card'
import { ScrollArea } from '@renderer/components/ui/scroll-area'
import { levelClass, logs } from '@renderer/student/mockData'
import { cn } from '@renderer/lib/utils'

export function LogPanel(): React.JSX.Element {
  return (
    <Card className="shadow-none">
      <CardHeader className="flex flex-row items-center justify-between space-y-0">
        <div>
          <CardDescription>系统日志</CardDescription>
          <CardTitle className="mt-1 text-base">实时输出</CardTitle>
        </div>
        <Button size="sm" variant="destructive">
          停止
        </Button>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-40 rounded-md bg-slate-950 p-3">
          <div className="space-y-1 font-mono text-xs">
            {logs.map((log) => (
              <div
                className="grid grid-cols-[64px_72px_minmax(0,1fr)] gap-3"
                key={`${log.time}-${log.message}`}
              >
                <span className="text-slate-400">{log.time}</span>
                <strong className={cn('font-semibold', levelClass[log.level])}>{log.level}</strong>
                <span className="truncate text-slate-300">{log.message}</span>
              </div>
            ))}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  )
}
