import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Cpu, HardDrive, Network, Cloud } from "lucide-react";

const mockStats = {
  cpu: "24%",
  ram: "3.2 GB / 8 GB",
  disk: "120 GB / 256 GB",
  network: "Down: 5 Mbps | Up: 1 Mbps",
};

export default function Dashboard() {
  return (
    <div className="min-h-screen bg-gray-900 text-white p-6 grid gap-6 grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
      <Card className="bg-gray-800 rounded-2xl shadow-lg">
        <CardContent className="p-4">
          <div className="flex items-center space-x-4">
            <Cpu className="text-yellow-400 w-8 h-8" />
            <div>
              <h3 className="text-xl font-semibold">CPU Usage</h3>
              <p>{mockStats.cpu}</p>
            </div>
          </div>
        </CardContent>
      </Card>
      <Card className="bg-gray-800 rounded-2xl shadow-lg">
        <CardContent className="p-4">
          <div className="flex items-center space-x-4">
            <HardDrive className="text-green-400 w-8 h-8" />
            <div>
              <h3 className="text-xl font-semibold">RAM Usage</h3>
              <p>{mockStats.ram}</p>
            </div>
          </div>
        </CardContent>
      </Card>
      <Card className="bg-gray-800 rounded-2xl shadow-lg">
        <CardContent className="p-4">
          <div className="flex items-center space-x-4">
            <Cloud className="text-blue-400 w-8 h-8" />
            <div>
              <h3 className="text-xl font-semibold">Disk Space</h3>
              <p>{mockStats.disk}</p>
            </div>
          </div>
        </CardContent>
      </Card>
      <Card className="bg-gray-800 rounded-2xl shadow-lg">
        <CardContent className="p-4">
          <div className="flex items-center space-x-4">
            <Network className="text-pink-400 w-8 h-8" />
            <div>
              <h3 className="text-xl font-semibold">Network</h3>
              <p>{mockStats.network}</p>
            </div>
          </div>
        </CardContent>
      </Card>
      <div className="col-span-full mt-4">
        <Button className="w-full bg-indigo-600 hover:bg-indigo-700">Sync Files Now</Button>
      </div>
    </div>
  );
}