import { clsx } from 'clsx';
import React from 'react';

export interface CenteredContentProps {
  children: React.ReactNode;
  className?: string;
  padding?: 'sm' | 'md' | 'lg' | 'xl';
}

const paddingClasses = {
  sm: 'py-4',
  md: 'py-6',
  lg: 'py-8',
  xl: 'py-12',
};

/**
 * CenteredContent component for consistently centered content
 */
export const CenteredContent: React.FC<CenteredContentProps> = ({
  children,
  className,
  padding = 'xl',
}) => {
  return <div className={clsx('text-center', paddingClasses[padding], className)}>{children}</div>;
};