import React from 'react';
import { TeamSwitcher } from './components/TeamSwitcher';
import { MainNav } from './components/MainNav';
import { Search } from './components/Search';
import { UserNav } from './components/UserNav';
import { CalendarDateRangePicker } from './components/DateRangePicker';
import { Overview } from './components/Overview';
import { RecentSales } from './components/RecentSales';

export default function DashboardScreen() {
  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white border-b">
        <div className="container flex items-center justify-between h-16 px-4">
          <TeamSwitcher />
          <MainNav />
          <div className="flex items-center space-x-4">
            <Search />
            <UserNav />
          </div>
        </div>
      </header>

      <main className="container p-4 space-y-4">
s
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-bold">Dashboard</h1>
          <div className="flex items-center space-x-2">
            <CalendarDateRangePicker />
            <button className="px-4 py-2 bg-blue-500 text-white rounded">
              Download
            </button>
          </div>
        </div>

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {[
            { title: "Total Revenue", value: "$45,231.89", subtext: "+20.1% from last month" },
            { title: "Subscriptions", value: "+2350", subtext: "+180.1% from last month" },
            { title: "Sales", value: "+12,234", subtext: "+19% from last month" },
            { title: "Active Now", value: "+573", subtext: "+201 since last hour" },
          ].map((card, index) => (
            <div key={index} className="p-6 bg-white border rounded-lg">
              <h3 className="text-sm font-medium text-gray-500">{card.title}</h3>
              <p className="text-2xl font-bold mt-1">{card.value}</p>
              <p className="text-xs text-gray-500 mt-1">{card.subtext}</p>
            </div>
          ))}
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          <div className="p-6 bg-white border rounded-lg">
            <h3 className="text-lg font-medium mb-4">Overview</h3>
            <Overview />
          </div>
          <div className="p-6 bg-white border rounded-lg space-y-4">
            <h3 className="text-lg font-medium">Recent Sales</h3>
            <p>You made 265 sales this month.</p>
            <RecentSales />
          </div>
        </div>
      </main>
    </div>
  );
}