// app/page.jsx
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export default function HomePage() {
  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold">Welcome to DMS</h2>

      <Tabs defaultValue="overview" className="w-full">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="activity">Activity</TabsTrigger>
        </TabsList>

        <TabsContent value="overview">
          <div className="grid md:grid-cols-3 gap-4 mt-4">
            <Card>
              <CardHeader>
                <CardTitle>📑 RFAs</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-3xl font-bold">24</p>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>📐 Drawings</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-3xl font-bold">112</p>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>📤 Transmittals</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-3xl font-bold">8</p>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="activity">
          <div className="mt-4 space-y-3">
            <p>
              ✔️ User <b>editor01</b> uploaded Drawing D-2025-07
            </p>
            <p>✔️ Transmittal T-2025-02 issued to Contractor</p>
            <p>✔️ RFA R-2025-03 marked as Resolved</p>
          </div>
        </TabsContent>
      </Tabs>

      <Button className="mt-6">Go to Dashboard</Button>
    </div>
  );
}