import React from 'react';
import { Panel } from './Panel';
import { Box } from './Box';
import { Button } from './Button';
import { Icon } from './Icon';
import { LucideIcon } from 'lucide-react';

interface QuickAction {
  label: string;
  icon: LucideIcon;
  onClick: () => void;
  variant?: 'primary' | 'secondary' | 'ghost';
}

interface QuickActionsPanelProps {
  actions: QuickAction[];
  className?: string;
}

/**
 * QuickActionsPanel
 * 
 * Provides fast access to common dashboard tasks.
 */
export function QuickActionsPanel({ actions, className = '' }: QuickActionsPanelProps) {
  return (
    <Panel title="Quick Actions" className={className}>
      <Box display="grid" gridCols={1} gap={2}>
        {actions.map((action, index) => (
          <Button
            key={index}
            variant={action.variant || 'secondary'}
            onClick={action.onClick}
            fullWidth
            style={{ justifyContent: 'flex-start', height: 'auto', padding: '12px' }}
          >
            <Box display="flex" align="center" gap={3}>
              <Icon icon={action.icon} size={5} />
              <span>{action.label}</span>
            </Box>
          </Button>
        ))}
      </Box>
    </Panel>
  );
}