import { BarChart3, Users, DollarSign, Activity } from "lucide-react";

export default function Dashboard() {
  return (
    <div className="min-h-screen bg-neutral-100 text-neutral-900 font-sans p-8">
      <div className="max-w-6xl mx-auto space-y-8">
        <header className="flex justify-between items-end">
          <div>
            <h1 className="text-3xl font-semibold tracking-tight">Overview</h1>
            <p className="text-neutral-500 mt-1">Your business performance at a glance.</p>
          </div>
          <button className="bg-neutral-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-neutral-800 transition-colors">
            Download Report
          </button>
        </header>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <StatCard title="Total Revenue" value="$45,231" icon={<DollarSign size={20} />} trend="+20.1%" />
          <StatCard title="Active Users" value="2,314" icon={<Users size={20} />} trend="+12.5%" />
          <StatCard title="Sales" value="12,234" icon={<BarChart3 size={20} />} trend="+19.2%" />
          <StatCard title="Active Sessions" value="573" icon={<Activity size={20} />} trend="-4.3%" bad />
        </div>
      </div>
    </div>
  );
}

function StatCard({ title, value, icon, trend, bad = false }: any) {
  return (
    <div className="bg-white p-6 rounded-xl border border-neutral-200 shadow-sm flex flex-col justify-between">
      <div className="flex justify-between items-center text-neutral-500">
        <h3 className="text-sm font-medium">{title}</h3>
        {icon}
      </div>
      <div className="mt-4">
        <div className="text-2xl font-semibold">{value}</div>
        <div className={`text-xs mt-1 font-medium ${bad ? "text-red-600" : "text-emerald-600"}`}>
          {trend} from last month
        </div>
      </div>
    </div>
  );
}
