import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
import {Button} from "@/components/ui/button";
import {Progress} from "@/components/ui/progress";
import Link from "next/link";
import {ADMIN_MANAGE_CLIENT_URL} from "@/lib/constants";


type AdminDashboardCardsProps = {
    total_clients: number | string | null;
    total_patients: number | string | null;
}


export default function AdminDashboardCards(props: AdminDashboardCardsProps) {
    return (
        <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
            <Card className="sm:col-span-2">
                <CardHeader className="pb-3">
                    <CardTitle>Manage Clients</CardTitle>
                    <CardDescription className="max-w-lg leading-relaxed">
                        Effortlessly manage registered clients (nurses, doctors, medical practitioners) by creating,
                        editing, and deleting their profiles.
                    </CardDescription>
                </CardHeader>
                <CardFooter>
                    <Button asChild>
                        <Link href={ADMIN_MANAGE_CLIENT_URL}>Add New Client</Link>
                    </Button>
                </CardFooter>
            </Card>

            <Card>
                <CardHeader className="pb-2">
                    <CardDescription>Total Clients</CardDescription>
                    <CardTitle className="text-4xl">{props.total_clients}</CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="text-xs text-muted-foreground">
                        +25% from last week
                    </div>
                </CardContent>
                <CardFooter>
                    <Progress value={25} aria-label="25% increase"/>
                </CardFooter>
            </Card>
            <Card>
                <CardHeader className="pb-2">
                    <CardDescription>Total Patients</CardDescription>
                    <CardTitle className="text-4xl">{props.total_patients}</CardTitle>
                </CardHeader>
                <CardContent>
                    <div className="text-xs text-muted-foreground">
                        +10% from last month
                    </div>
                </CardContent>
                <CardFooter>
                    <Progress value={12} aria-label="12% increase"/>
                </CardFooter>
            </Card>
        </div>
    )
}