"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import AudioVisualTabs from "./components/audio-visual-tabs";
import { UploadIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { usePermission } from "@/components/context/permission-context";
import { AccessGuard } from "@/components/access-guard";

const ReactTableAudioVisualPage = () => {
  const { can } = usePermission();

  return (
    <div className="min-h-screen bg-gray-50">
      <SiteBreadcrumb />
      <div className="p-6">
        <div className="max-w-7xl mx-auto">
          <Card className="shadow-sm border-0">
            <CardHeader className="border-b border-gray-200 bg-white rounded-t-lg">
              <CardTitle>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-black rounded-lg flex items-center justify-center">
                      <UploadIcon className="w-4 h-4 text-blue-600" />
                    </div>
                    <div>
                      <h1 className="text-xl font-semibold text-gray-900">
                        Audio-Visual Management
                      </h1>
                      <p className="text-sm text-gray-500">
                        Manage your submitted audio-visual files and pending
                        approvals
                      </p>
                    </div>
                  </div>
                  <AccessGuard action="create">
                    <div className="flex-none">
                      <Link href={"/admin/content/video/create"}>
                        <Button
                          color="primary"
                          className="text-white shadow-sm hover:shadow-md transition-shadow"
                        >
                          <UploadIcon size={18} className="mr-2" />
                          Create Audio-Visual
                        </Button>
                      </Link>
                    </div>
                  </AccessGuard>
                </div>
              </CardTitle>
            </CardHeader>
            <CardContent className="p-6 bg-gray-50">
              <AudioVisualTabs />
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default ReactTableAudioVisualPage;