"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { UploadIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Icon } from "@iconify/react/dist/iconify.js";
import TableAudio from "./components/table-audio";
import { Link } from "@/components/navigation";
import { useTranslations } from "next-intl";

const ReactTableAudioPage = () => {
  const t = useTranslations("AnalyticsDashboard");
  return (
    <div>
      <SiteBreadcrumb />
      <div className="space-y-4">
        <Card className="py-4 px-3">
          <div className="flex flex-wrap justify-between items-center px-5">
            <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
              <div>
                <Icon icon="icon-park-outline:check-one" />
              </div>
              <div>
                <p>
                  <span className="text-red-500">{t("average", { defaultValue: "Average" })} :0</span>
                </p>
                <p className="text-sm">
                  {t("Hasil_unggah_disetujui_hari_ini", { defaultValue: "Hasil Unggah Disetujui Hari Ini" })}
                </p>
              </div>
            </div>
            <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
              <div>
                <Icon icon="material-symbols:settings-backup-restore-rounded" />
              </div>
              <div>
                <p>
                  <span className="text-red-500">{t("average", { defaultValue: "Average" })} :0</span>
                </p>
                <p className="text-sm">{t("Hasil_unggah_direvisi_hari_ini", { defaultValue: "Hasil Unggah Direvisi Hari Ini" })}</p>
              </div>
            </div>
            <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
              <div>
                <Icon icon="healthicons:no-outline" />
              </div>
              <div>
                <p>
                  <span className="text-red-500">{t("average", { defaultValue: "Average" })} :0</span>
                </p>
                <p className="text-sm">{t("Hasil_unggah_ditolak_hari_ini", { defaultValue: "Hasil Unggah Ditolak Hari Ini" })}</p>
              </div>
            </div>
          </div>
        </Card>
        <Card>
          <CardHeader className="border-b border-solid border-default-200 mb-6">
            <CardTitle>
              <div className="flex items-center">
                <div className="flex-1 text-xl font-medium text-default-900">
                  {t("audio", { defaultValue: "Audio" })}
                </div>
                <div className="flex-none">
                  <Link href={"/contributor/content/audio/create"}>
                    <Button color="primary" className="text-white">
                      <UploadIcon size={18} className="mr-2" />
                      {t("create-audio", { defaultValue: "Create Audio" })}
                    </Button>
                  </Link>
                  {/* <Button color="primary" className="text-white ml-3">
                    <UploadIcon />
                    Unggah Audio Dengan AI
                  </Button> */}
                </div>
              </div>
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <TableAudio />
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default ReactTableAudioPage;