import React, { ReactNode, HTMLAttributes } from 'react';
import { Box } from './Box';

interface SurfaceProps extends HTMLAttributes<HTMLElement> {
  children: ReactNode;
  variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple';
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
  border?: boolean;
  padding?: number;
  className?: string;
  display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
}

export function Surface({ 
  children, 
  variant = 'default',
  rounded = 'lg',
  border = false,
  padding = 0,
  className = '',
  display,
  ...props 
}: SurfaceProps) {
  const variantClasses = {
    default: 'bg-iron-gray',
    muted: 'bg-iron-gray/50',
    dark: 'bg-deep-graphite',
    glass: 'bg-deep-graphite/60 backdrop-blur-md',
    'gradient-blue': 'bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite',
    'gradient-gold': 'bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite',
    'gradient-purple': 'bg-gradient-to-br from-purple-600/20 via-iron-gray/80 to-deep-graphite'
  };

  const roundedClasses = {
    none: 'rounded-none',
    sm: 'rounded-sm',
    md: 'rounded-md',
    lg: 'rounded-lg',
    xl: 'rounded-xl',
    '2xl': 'rounded-2xl',
    full: 'rounded-full'
  };

  const paddingClasses: Record<number, string> = {
    0: 'p-0',
    1: 'p-1',
    2: 'p-2',
    3: 'p-3',
    4: 'p-4',
    6: 'p-6',
    8: 'p-8',
    10: 'p-10',
    12: 'p-12'
  };

  const classes = [
    variantClasses[variant],
    roundedClasses[rounded],
    border ? 'border border-charcoal-outline' : '',
    paddingClasses[padding] || 'p-0',
    display ? display : '',
    className
  ].filter(Boolean).join(' ');

  return (
    <Box className={classes} {...props}>
      {children}
    </Box>
  );
}