import DashboardCountData from "@/components/DashboardCountData";
import DashboardGrafik from "@/components/DashboardGrafik";
import DashboardLastData from "@/components/DashboardLastData";
import {
  Badge,
  Container,
  Flex,
  Group,
  Progress,
  Stack,
  Text,
  Title,
} from "@mantine/core";

export default function Dashboard() {
  return (
    <Container
      size="xl"
      py="xl"
      w={"100%"}
      style={{
        minHeight: "100vh",
        background:
          "radial-gradient(circle at top left, rgba(0,255,200,0.05), transparent 70%)",
      }}
    >
      <Stack gap="xl">
        <Flex align="center" justify="space-between">
          <Group>
            <Title order={2} c="gray.0">
              Dashboard Overview
            </Title>
            <Badge color="teal" variant="light" size="lg" radius="sm">
              Live
            </Badge>
          </Group>
        </Flex>
        <DashboardCountData />
        <DashboardGrafik />
        <DashboardLastData />
      </Stack>
    </Container>
  );
}

function ProgressSection({
  label,
  value,
  color,
}: {
  label: string;
  value: number;
  color: string;
}) {
  return (
    <Stack gap={4}>
      <Flex justify="space-between">
        <Text size="sm" c="gray.0">
          {label}
        </Text>
        <Text size="sm" c="dimmed">
          {value}%
        </Text>
      </Flex>
      <Progress value={value} color={color} radius="xl" size="md" />
    </Stack>
  );
}