import Image from "next/image";
import { StatisticsBlock } from "@/components/blocks/statistics-block";
import { BlockBadge, WelcomeBlock } from "@/components/blocks/welcome-block";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import RevinueBarChart from "@/components/revenue-bar-chart";
import DashboardDropdown from "@/components/dashboard-dropdown";
import OverviewChart from "./components/overview-chart";
import CompanyTable from "./components/company-table";
import RecentActivity from "./components/recent-activity";
import MostSales from "./components/most-sales";
import OverviewRadialChart from "./components/overview-radial";
import { useTranslations } from "next-intl";
const DashboardPage = () => {
  const t = useTranslations("AnalyticsDashboard");
  return (
    <div>
      <div className="grid grid-cols-12 items-center gap-5 mb-5">
        <div className="2xl:col-span-12 lg:col-span-12 col-span-12">
          <Card>
            <CardContent className="p-4">
              <div className="grid md:grid-cols-3   gap-4">
                <StatisticsBlock
                  title={"Hasil unggah disetujui hari ini"}
                  total="3,564"
                  className="bg-info/10 border-none shadow-none"
                />
                <StatisticsBlock
                  title={"Hasil unggah direvisi hari ini"}
                  total="564"
                  className="bg-warning/10 border-none shadow-none"
                  chartColor="#FB8F65"
                />
                <StatisticsBlock
                  title={"Hasil unggah ditolak hari ini"}
                  total="+5.0%"
                  className="bg-primary/10 border-none shadow-none"
                  chartColor="#2563eb"
                />
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
      <div className="grid grid-cols-12 gap-5">
        <div className="lg:col-span-4 col-span-12">
          <Card>
            <CardHeader className="flex flex-row items-center">
              <CardTitle className="flex-1">
                {"Total Produksi Konten"}
              </CardTitle>
              <DashboardDropdown />
            </CardHeader>
            <CardContent>
              <RecentActivity />
            </CardContent>
          </Card>
        </div>
        <div className="lg:col-span-8 col-span-12">
          <Card>
            <CardHeader className="flex flex-row items-center">
              <CardTitle className="flex-1">{"Table"}</CardTitle>
              <DashboardDropdown />
            </CardHeader>
            <CardContent className="p-0">
              <CompanyTable />
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default DashboardPage;