'use client';

import React from 'react';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { motion, AnimatePresence } from 'framer-motion';

interface BulkActionBarProps {
  selectedCount: number;
  actions: {
    label: string;
    onClick: () => void;
    variant?: 'primary' | 'secondary' | 'danger';
    icon?: React.ReactNode;
  }[];
  onClearSelection: () => void;
}

/**
 * BulkActionBar
 * 
 * Floating action bar that appears when items are selected in a table.
 */
export function BulkActionBar({
  selectedCount,
  actions,
  onClearSelection
}: BulkActionBarProps) {
  return (
    <AnimatePresence>
      {selectedCount > 0 && (
        <Box
          as={motion.div}
          initial={{ y: 100, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: 100, opacity: 0 }}
          position="fixed"
          bottom="8"
          left="1/2"
          translateX="-1/2"
          zIndex={50}
          bg="bg-surface-charcoal"
          border
          borderColor="border-primary-blue/50"
          rounded="xl"
          shadow="xl"
          px={6}
          py={4}
          bgOpacity={0.9}
          blur="md"
        >
          <Stack direction="row" align="center" gap={8}>
            <Stack direction="row" align="center" gap={3}>
              <Box bg="bg-primary-blue" rounded="full" px={2} py={0.5}>
                <Text size="xs" weight="bold" color="text-white">
                  {selectedCount}
                </Text>
              </Box>
              <Text size="sm" weight="medium" color="text-white">
                Items Selected
              </Text>
            </Stack>

            <Box w="px" h="6" bg="bg-charcoal-outline" />

            <Stack direction="row" align="center" gap={3}>
              {actions.map((action) => (
                <Button
                  key={action.label}
                  size="sm"
                  variant={action.variant === 'danger' ? 'secondary' : (action.variant || 'primary')}
                  onClick={action.onClick}
                  icon={action.icon}
                >
                  {action.label}
                </Button>
              ))}
              <Button
                size="sm"
                variant="ghost"
                onClick={onClearSelection}
              >
                Cancel
              </Button>
            </Stack>
          </Stack>
        </Box>
      )}
    </AnimatePresence>
  );
}