"use client";

import { Card, CardContent } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { HardDrive } from "lucide-react";

interface DiskSpaceCardProps {
  usedPercent?: number;
  totalGb?: number;
  freeGb?: number;
}

export function DiskSpaceCard({
  usedPercent = 0,
  totalGb,
  freeGb,
}: DiskSpaceCardProps) {
  return (
    <Card className="py-0">
      <CardContent className="flex items-center gap-3 px-4 py-3">
        <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/10">
          <HardDrive className="size-4 text-blue-500" />
        </div>
        <div className="flex flex-1 flex-col gap-1">
          <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
            Espace Disque
          </span>
          <div className="flex items-center justify-between">
            <span className="text-sm font-semibold tabular-nums text-foreground">
              {usedPercent.toFixed(1)}% utilisé
            </span>
            {totalGb !== undefined && (
              <span className="text-[10px] tabular-nums text-muted-foreground">
                {totalGb} GB total
              </span>
            )}
          </div>
          <Progress
            value={usedPercent}
            className="h-1.5 bg-muted [&>[data-slot=progress-indicator]]:bg-blue-500"
          />
          {freeGb !== undefined && (
            <span className="text-[10px] text-muted-foreground">
              {freeGb.toFixed(1)} GB libres
            </span>
          )}
        </div>
      </CardContent>
    </Card>
  );
}
