"use client";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Download, Upload, Database } from "lucide-react";
import type { BankingData } from "@/lib/types";

interface DataCardProps {
  data: BankingData;
  importing: boolean;
  onExport: () => void;
  onImport: () => void;
}

export function DataCard({
  data,
  importing,
  onExport,
  onImport,
}: DataCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Database className="w-5 h-5" />
          Données
        </CardTitle>
        <CardDescription>
          Exportez ou importez vos données pour les sauvegarder ou les
          transférer
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
          <div>
            <p className="font-medium">Statistiques</p>
            <p className="text-sm text-muted-foreground">
              {data.accounts.length} comptes, {data.transactions.length}{" "}
              transactions, {data.categories.length} catégories
            </p>
          </div>
        </div>

        <div className="flex gap-2">
          <Button
            onClick={onExport}
            variant="outline"
            className="flex-1 bg-transparent"
          >
            <Download className="w-4 h-4 mr-2" />
            Exporter (JSON)
          </Button>
          <Button
            onClick={onImport}
            variant="outline"
            className="flex-1 bg-transparent"
            disabled={importing}
          >
            <Upload className="w-4 h-4 mr-2" />
            {importing ? "Import..." : "Importer"}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}