"use client"

import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts"

import { Card, CardContent } from "@/components/ui/card"
import { ChartContainer } from "@/components/ui/chart"

export default function ClientsSummaryChart() {
    return (
        <Card className="max-w-xs">
            <CardContent className="flex gap-4 p-4">
                <div className="grid items-center gap-2">
                    <div className="grid flex-1 auto-rows-min gap-0.5">
                        <div className="text-sm text-muted-foreground">Males</div>
                        <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
                            90%
                            {/*<span className="text-sm font-normal text-muted-foreground">*/}
                            {/*    kcal*/}
                            {/*</span>*/}
                        </div>
                    </div>

                    <div className="grid flex-1 auto-rows-min gap-0.5">
                        <div className="text-sm text-muted-foreground">Females</div>
                        <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
                            8%
                        </div>
                    </div>
                    {/*<div className="grid flex-1 auto-rows-min gap-0.5">*/}
                    {/*    <div className="text-sm text-muted-foreground">Theerapists</div>*/}
                    {/*    <div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">*/}
                    {/*        2%*/}
                    {/*    </div>*/}
                    {/*</div>*/}
                </div>
                <ChartContainer
                    config={{
                        move: {
                            label: "Nurses",
                            color: "hsl(var(--chart-1))",
                        },
                        exercise: {
                            label: "Doctors",
                            color: "hsl(var(--chart-2))",
                        },
                        // stand: {
                        //     label: "Therapists",
                        //     color: "hsl(var(--chart-3))",
                        // },
                    }}
                    className="mx-auto aspect-square w-full max-w-[60%]"
                >
                    <RadialBarChart
                        margin={{
                            left: -10,
                            right: -10,
                            top: -10,
                            bottom: -10,
                        }}
                        data={[
                            {
                                activity: "stand",
                                value: (8 / 12) * 100,
                                fill: "var(--color-stand)",
                            },
                            {
                                activity: "exercise",
                                value: (46 / 60) * 100,
                                fill: "var(--color-exercise)",
                            },
                            // {
                            //     activity: "move",
                            //     value: (245 / 360) * 100,
                            //     fill: "var(--color-move)",
                            // },
                        ]}
                        innerRadius="20%"
                        barSize={24}
                        startAngle={90}
                        endAngle={450}
                    >
                        <PolarAngleAxis
                            type="number"
                            domain={[0, 100]}
                            dataKey="value"
                            tick={false}
                        />
                        <RadialBar dataKey="value" background cornerRadius={5} />
                    </RadialBarChart>
                </ChartContainer>
            </CardContent>
        </Card>
    )
}