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

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

export interface QuickActionsPanelProps {
  actions: QuickAction[];
}

export const QuickActionsPanel = ({ 
  actions 
}: QuickActionsPanelProps) => {
  return (
    <Panel title="Quick Actions">
      <Box display="flex" flexDirection="col" gap={2}>
        {actions.map((action, index) => (
          <Button 
            key={index} 
            variant={action.intent === 'danger' ? 'danger' : 'secondary'}
            onClick={action.onClick}
            fullWidth
          >
            <Box display="flex" alignItems="center" gap={3} fullWidth>
              <Icon icon={action.icon} size={4} />
              {action.label}
            </Box>
          </Button>
        ))}
      </Box>
    </Panel>
  );
};