veza/apps/web/src/components/settings/data/DataExportView.tsx

import React, { useState } from 'react';
import { Card } from '../../ui/card';
import { Button } from '../../ui/button';
import { Download, FileText, Shield } from 'lucide-react';
import { DataExportModal } from './DataExportModal';

export const DataExportView: React.FC = () => {
  const [showModal, setShowModal] = useState(false);

  // Mock History
  const [exports] = useState([
    {
      id: 'e1',
      date: 'Oct 10, 2023',
      type: 'Full Archive (JSON)',
      status: 'ready',
      size: '45 MB',
    },
    {
      id: 'e2',
      date: 'Jan 15, 2023',
      type: 'Profile Only (CSV)',
      status: 'expired',
      size: '2 MB',
    },
  ]);

  return (
    <div className="max-w-4xl mx-auto space-y-8 animate-fadeIn pb-20">
      <div>
        <h2 className="text-2xl font-bold text-white mb-2">YOUR DATA</h2>
        <p className="text-kodo-content-dim font-mono text-sm">
          Manage, export, and control your personal information.
        </p>
      </div>

      <Card variant="default">
        <div className="flex items-start gap-4 mb-6">
          <div className="p-4 bg-kodo-steel/10 rounded-full text-kodo-steel">
            <Shield className="w-6 h-6" />
          </div>
          <div>
            <h3 className="font-bold text-white text-lg">
              Request Data Archive
            </h3>
            <p className="text-kodo-content-dim text-sm mt-1 max-w-xl">
              You can request a download of all the data Veza has associated
              with your account. This includes your profile, uploaded content
              metadata, comments, and purchase history.
            </p>
          </div>
        </div>
        <Button
          variant="primary"
          icon={<Download className="w-4 h-4" />}
          onClick={() => setShowModal(true)}
        >
          Start New Export
        </Button>
      </Card>

      <Card variant="default">
        <h3 className="font-bold text-white mb-4">Export History</h3>
        <div className="space-y-4">
          {exports.map((item) => (
            <div
              key={item.id}
              className="flex flex-col md:flex-row items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel"
            >
              <div className="flex items-center gap-4 mb-2 md:mb-0 w-full md:w-auto">
                <FileText className="w-5 h-5 text-kodo-content-dim" />
                <div>
                  <div className="text-white font-bold text-sm">
                    {item.type}
                  </div>
                  <div className="text-xs text-kodo-content-dim flex gap-2">
                    <span>{item.date}</span>
                    <span>•</span>
                    <span>{item.size}</span>
                  </div>
                </div>
              </div>

              {item.status === 'ready' ? (
                <Button
                  variant="secondary"
                  size="sm"
                  icon={<Download className="w-4 h-4" />}
                >
                  Download
                </Button>
              ) : (
                <span className="text-xs text-kodo-content-dim bg-kodo-graphite px-4 py-1 rounded">
                  Expired
                </span>
              )}
            </div>
          ))}
        </div>
      </Card>

      {showModal && (
        <DataExportModal
          onClose={() => setShowModal(false)}
          onRequest={() => {}}
        />
      )}
    </div>
  );
};