"use client";
import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import TagForm from "@/components/tags/tag-form";
import { usePermission } from "@/utils/auth/permission";
import { FC, useState } from "react";

const TagContent: FC = () => {
    const [isOpen, setOpen] = useState(false);
    return (
        <div>
            <PageHeader>
                <div className="flex justify-between !p-0">
                    <h2 className="text-xl font-semibold">Tags</h2>
                    {usePermission("tags.create") && (
                        <div className="flex">
                            <ActionButton
                                type="add"
                                className="mr-2"
                                onClick={() => setOpen(true)}
                            >
                                Add
                            </ActionButton>
                            <TagForm isOpen={isOpen} setOpen={setOpen} />
                        </div>
                    )}
                </div>
            </PageHeader>
        </div>
    );
};

export default TagContent;