import React from "react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { Plus, Table2Icon, Grid } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { Routes } from "@/config/routes";

type MediaTableToolbarActionsProps = {
    view?: "table" | "grid";
    onViewChange?: (view: "table" | "grid") => void;
};

export const MediaTableToolbarActions: React.FC<MediaTableToolbarActionsProps> = (props) => {
    const {
        view,
        onViewChange
    } = props;

    const t = useTranslations();

    return (
        <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" asChild>
                <Link href={Routes.DASHBOARD.MEDIA_CREATE_MANY}>
                    <Plus className="h-4 w-4" />

                    {t("dashboard.media.actions.create")}
                </Link>
            </Button>

            <ButtonGroup>
                <Button
                  variant={view === "table" ? "default" : "outline"}
                  size="icon"
                  onClick={() => onViewChange && onViewChange("table")}>
                    <Table2Icon />
                </Button>

                <Button
                  variant={view === "grid" ? "default" : "outline"}
                  size="icon"
                  onClick={() => onViewChange && onViewChange("grid")}>
                    <Grid />
                </Button>
            </ButtonGroup>
        </div>
    );
};