import { Link } from '@inertiajs/react';
import type { ReactNode } from 'react';
import { Button } from '@/components/ui/button';
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@/components/ui/tooltip';

export type RowAction = {
    label: string;
    icon: ReactNode;
    iconClassName?: string;
    show?: boolean;
    onClick?: () => void;
    href?: string;
};

type RowActionsProps = {
    actions: RowAction[];
    wrapperClassName?: string;
};

export function RowActions({
    actions,
    wrapperClassName = 'flex items-center justify-center gap-1',
}: RowActionsProps) {
    return (
        <TooltipProvider>
            <div className={wrapperClassName}>
                {actions
                    .filter((action) => action.show !== false)
                    .map((action) => (
                        <Tooltip key={action.label}>
                            <TooltipTrigger asChild>
                                {action.href ? (
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        asChild
                                        className={action.iconClassName}
                                    >
                                        <Link href={action.href}>
                                            {action.icon}
                                        </Link>
                                    </Button>
                                ) : (
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        onClick={action.onClick}
                                        className={action.iconClassName}
                                    >
                                        {action.icon}
                                    </Button>
                                )}
                            </TooltipTrigger>
                            <TooltipContent side="top">
                                {action.label}
                            </TooltipContent>
                        </Tooltip>
                    ))}
            </div>
        </TooltipProvider>
    );
}