/**
 * Common styles shared across all block types
 */

export const commonBlockStyles = `
  /* Common block spacing and layout */
  /* TODO: Extract common spacing from existing blocks */
  
  /* Common focus states */
  /* TODO: Extract common focus styles */
  
  /* Common selected states */
  /* TODO: Extract common selection styles */
  
  /* Common hover states */
  /* TODO: Extract common hover styles */
  
  /* Common transition effects */
  /* TODO: Extract common transitions */
  
  /* Common placeholder styles */
  /* TODO: Extract common placeholder styles */
  
  /* Common error states */
  /* TODO: Extract common error styles */
  
  /* Common loading states */
  /* TODO: Extract common loading styles */
`;

/**
 * Helper function to generate consistent block classes
 */
export const getBlockClasses = (
  type: string,
  isSelected: boolean,
  additionalClasses: string[] = []
): string => {
  const classes = ['block', type];
  if (isSelected) {
    classes.push('selected');
  }
  classes.push(...additionalClasses);
  return classes.join(' ');
};

/**
 * Helper function to generate consistent data attributes
 */
export const getBlockDataAttributes = (
  blockId: string,
  blockType: string,
  additionalAttributes: Record<string, string> = {}
): string => {
  const attributes = {
    'data-block-id': blockId,
    'data-block-type': blockType,
    ...additionalAttributes
  };
  
  return Object.entries(attributes)
    .map(([key, value]) => `${key}="${value}"`)
    .join(' ');
};