/**
 * DashboardPage.tsx
 * Mocked example: ProjExpert dashboard (tailwind + components)
 */
"use client";
import { useState } from "react";
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
export default function DashboardPage() {
  const [progress, setProgress] = useState(65);
  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-white">Dashboard Overview</h1>
        <div className="flex items-center gap-2">
          <Button variant="ghost">Share</Button>
          <Button variant="primary" onClick={() => setProgress((p) => Math.min(100, p + 5))}>
            Increase
          </Button>
        </div>
      </div>
      <Card className="bg-[#0f1720] border-[#1f2937]">
        <CardHeader>
          <div className="flex items-center gap-2">
            <span className="text-sm font-medium text-gray-200">Active Track</span>
            <span className="px-2 py-0.5 rounded bg-blue-600 text-xs">Web Dev</span>
          </div>
        </CardHeader>
        <CardContent>
          <p className="text-gray-300">
            This example demonstrates a mock component structure with tailwind classes.
          </p>
          <div className="mt-3">
            <div className="h-2 bg-[#0b1220] rounded">
              <div className="h-2 bg-gradient-to-r from-blue-400 to-purple-400 rounded" style={{ width: String(progress) + "%" }} />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}