import { Button } from '@/components/ui/button';
import { __ } from '@wordpress/i18n';
import { X } from 'lucide-react';

export type BulkActionItem = {
	label: string;
	icon?: React.ReactNode;
	onClick: () => void;
	variant?: 'default' | 'danger' | 'success';
	disabled?: boolean;
};

type Props = {
	count: number;
	actions: BulkActionItem[];
	isPending?: boolean;
	onDismiss?: () => void;
};

const BulkActionBar = ({ count, actions, isPending = false, onDismiss }: Props) => {
	if (count === 0) return null;

	return (
		<div className="fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-lg">
			<span className="whitespace-nowrap text-[13px] font-medium text-gray-700">
				{count} {__('selected', 'allcoach')}
			</span>
			<div className="h-4 w-px bg-gray-200" />
			{actions.map((action, i) => (
				<Button
					key={i}
					size="sm"
					variant="outline"
					disabled={isPending || action.disabled}
					onClick={action.onClick}
					className={
						action.variant === 'danger'
							? 'cursor-pointer gap-1.5 text-[13px] text-red-600 hover:border-red-300 hover:bg-red-50 hover:text-red-700'
							: action.variant === 'success'
								? 'cursor-pointer gap-1.5 text-[13px] text-teal-600 hover:border-teal-300 hover:bg-teal-50 hover:text-teal-700'
								: 'cursor-pointer gap-1.5 text-[13px]'
					}
				>
					{action.icon}
					{action.label}
				</Button>
			))}
			{onDismiss && (
				<>
					<div className="h-4 w-px bg-gray-200" />
					<Button
						size="icon-xs"
						variant="ghost"
						className="cursor-pointer text-gray-400 hover:text-gray-600"
						onClick={onDismiss}
					>
						<X className="size-3.5" />
					</Button>
				</>
			)}
		</div>
	);
};

export { BulkActionBar };