"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import AudioTabs from "./components/audio-tabs";
import { UploadIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";

const ReactTableAudioPage = () => {
  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-blue-100 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 Management</h1>
                      <p className="text-sm text-gray-500">Manage your submitted audio files and pending approvals</p>
                    </div>
                  </div>
                  <div className="flex-none">
                    <Link href={"/admin/content/audio/create"}>
                      <Button color="primary" className="text-white shadow-sm hover:shadow-md transition-shadow">
                        <UploadIcon size={18} className="mr-2" />
                        Create Audio
                      </Button>
                    </Link>
                  </div>
                </div>
              </CardTitle>
            </CardHeader>
            <CardContent className="p-6 bg-gray-50">
              <AudioTabs />
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default ReactTableAudioPage;