import { Card, LinearProgress, Stack, Typography } from "@mui/joy";
import { Activity } from "lucide-react";

import { DashboardSummary } from "./types";

export function ServerLoadCard({ summary }: { summary: DashboardSummary }) {
  return (
    <Card variant="outlined">
      <Stack gap={1.5}>
        <Stack direction="row" alignItems="center" gap={1}>
          <Activity size={18} />
          <Typography level="title-sm" fontWeight={600}>
            Current server load
          </Typography>
        </Stack>
        <Typography level="h1" fontSize="2.5rem">
          {summary.serverLoadPercent.toFixed(1)}%
        </Typography>
        <LinearProgress
          determinate
          value={summary.serverLoadPercent}
          color={
            summary.serverLoadPercent > 85
              ? "danger"
              : summary.serverLoadPercent > 60
                ? "warning"
                : "success"
          }
          sx={{
            borderRadius: "xl",
            "&::before": {
              transitionProperty: "inline-size",
              transitionDuration: "320ms",
              msTransitionTimingFunction: "ease-in-out",
            },
          }}
        />
      </Stack>
    </Card>
  );
}
