client/src/components/StorageStatus.tsx

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Database, Settings } from "lucide-react";
import { useIndexedDB } from "@/hooks/useIndexedDB";

export default function StorageStatus() {
  const { storageStats } = useIndexedDB();

  return (
    <Card className="bg-gradient-to-r from-emerald-50 to-blue-50 border-l-4 border-emerald">
      <CardContent className="pt-6">
        <div className="flex items-start justify-between">
          <div>
            <CardTitle className="text-lg font-poppins font-semibold text-deep-charcoal mb-2 flex items-center">
              <Database className="text-emerald mr-2" />
              Local Data Storage
            </CardTitle>
            <p className="text-warm-gray mb-4">
              All your calculations and data are stored locally on your device. No internet required.
            </p>
            <div className="flex flex-wrap gap-4 text-sm">
              <div className="flex items-center space-x-2">
                <span className="w-2 h-2 bg-emerald-500 rounded-full"></span>
                <span>{storageStats.calculations} Calculations Saved</span>
              </div>
              <div className="flex items-center space-x-2">
                <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
                <span>{storageStats.reports} Reports Generated</span>
              </div>
              <div className="flex items-center space-x-2">
                <span className="w-2 h-2 bg-saffron rounded-full"></span>
                <span>{storageStats.size} MB Used</span>
              </div>
            </div>
          </div>
          <Button 
            variant="secondary"
            className="bg-emerald text-white hover:bg-emerald-600"
            size="sm"
          >
            <Settings className="w-4 h-4" />
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}