"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import ImageTabs from "./components/image-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 ReactTableImagePage = () => {
  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-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">
                        Image Management
                      </h1>
                      <p className="text-sm text-gray-500">
                        Manage your submitted images and pending approvals
                      </p>
                    </div>
                  </div>
                  <AccessGuard action="create">
                    <div className="flex-none">
                      <Link href={"/admin/content/image/create"}>
                        <Button
                          color="primary"
                          className="text-white shadow-sm hover:shadow-md transition-shadow cursor-pointer"
                        >
                          <UploadIcon size={18} className="mr-2" />
                          Create Image
                        </Button>
                      </Link>
                      {/* <Link href={"/contributor/content/image/createAi"}>
                      <Button color="primary" className="text-white ml-3">
                        <UploadIcon />
                        Unggah Foto Dengan AI
                      </Button>
                    </Link> */}
                    </div>
                  </AccessGuard>
                </div>
              </CardTitle>
            </CardHeader>
            <CardContent className="p-6 bg-gray-50">
              <ImageTabs />
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default ReactTableImagePage;