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

const ReactTableImagePage = () => {
  return (
    <div>
      {/* <SiteBreadcrumb /> */}
      <div className="space-y-4">
        <Card className="m-2">
          <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">
                  Audio Visual
                </div>
                <div className="flex-none">
                  <Link href={"/admin/content/audio-visual/create"}>
                    <Button color="primary" className="text-white">
                      <UploadIcon size={18} className="mr-2" />
                      Audio Visual
                    </Button>
                  </Link>
                  {/* <Link href={"/contributor/content/image/createAi"}>
                    <Button color="primary" className="text-white ml-3">
                      <UploadIcon />
                      Unggah Foto Dengan AI
                    </Button>
                  </Link> */}
                </div>
              </div>
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <TableVideo />
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default ReactTableImagePage;