import { Terminal, Code, Key, BarChart } from 'lucide-react';
import { Button } from '@/components/ui/button';

export function DeveloperPage() {
  return (
    <div className="min-h-screen p-6 space-y-6">
      <div className="glass-hud rounded-2xl border-white/10 p-6 hud-corner">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-kodo-cyan/20 flex items-center justify-center border border-kodo-cyan/30">
              <Terminal className="w-6 h-6 text-kodo-cyan" />
            </div>
            <div>
              <h1 className="text-2xl font-display font-bold text-white">
                Developer API
              </h1>
              <p className="text-sm text-kodo-secondary">
                Build with Veza's API
              </p>
            </div>
          </div>
          <Button className="bg-kodo-cyan hover:bg-kodo-cyan/80 text-black">
            <Key className="w-4 h-4 mr-2" />
            Generate API Key
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="glass-hud rounded-xl border-white/10 p-6">
          <Code className="w-8 h-8 text-kodo-cyan mb-3" />
          <h3 className="font-bold text-white mb-2">Documentation</h3>
          <p className="text-sm text-kodo-secondary">Complete API reference</p>
        </div>
        <div className="glass-hud rounded-xl border-white/10 p-6">
          <Key className="w-8 h-8 text-kodo-lime mb-3" />
          <h3 className="font-bold text-white mb-2">API Keys</h3>
          <p className="text-sm text-kodo-secondary">Manage your credentials</p>
        </div>
        <div className="glass-hud rounded-xl border-white/10 p-6">
          <BarChart className="w-8 h-8 text-kodo-magenta mb-3" />
          <h3 className="font-bold text-white mb-2">Usage Stats</h3>
          <p className="text-sm text-kodo-secondary">Monitor API calls</p>
        </div>
      </div>

      <div className="glass-hud rounded-xl border-white/10 p-12 text-center">
        <Terminal className="w-16 h-16 text-kodo-secondary mx-auto mb-4 opacity-50" />
        <h3 className="text-lg font-bold text-white mb-2">
          Get Started with Veza API
        </h3>
        <p className="text-kodo-secondary mb-4">
          Access our powerful API to build integrations and applications
        </p>
        <Button
          variant="outline"
          className="border-kodo-cyan/30 text-kodo-cyan hover:bg-kodo-cyan/10"
        >
          View Documentation
        </Button>
      </div>
    </div>
  );
}
