import React, { ReactNode, forwardRef } from 'react';
import { Box } from './Box';
import { Surface, SurfaceProps } from './Surface';

export interface CardProps extends Omit<SurfaceProps<'div'>, 'children' | 'title' | 'variant'> {
  children: ReactNode;
  variant?: 'default' | 'dark' | 'muted' | 'glass' | 'outline' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary';
  title?: ReactNode;
  footer?: ReactNode;
}

export const Card = forwardRef<HTMLDivElement, CardProps>(({ 
  children, 
  variant = 'default',
  title,
  footer,
  ...props
}, ref) => {
  const isOutline = variant === 'outline';
  
  const style: React.CSSProperties = isOutline ? {
    backgroundColor: 'transparent',
    border: '1px solid var(--ui-color-border-default)',
  } : {};

  return (
    <Surface 
      ref={ref}
      variant={isOutline ? 'default' : variant}
      rounded="lg"
      shadow="md"
      style={style}
      {...props}
    >
      {title && (
        <Box padding={4} borderBottom>
          {typeof title === 'string' ? (
            <h3 className="text-lg font-bold text-[var(--ui-color-text-high)]">{title}</h3>
          ) : title}
        </Box>
      )}
      
      <Box padding={4}>
        {children}
      </Box>
      
      {footer && (
        <Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
          {footer}
        </Box>
      )}
    </Surface>
  );
});

Card.displayName = 'Card';

export const CardHeader = ({ title, children }: { title?: string, children?: ReactNode }) => (
  <Box marginBottom={4}>
    {title && <h3 className="text-lg font-bold text-[var(--ui-color-text-high)]">{title}</h3>}
    {children}
  </Box>
);

export const CardContent = ({ children }: { children: ReactNode }) => (
  <Box>{children}</Box>
);

export const CardFooter = ({ children }: { children: ReactNode }) => (
  <Box marginTop={4} paddingTop={4} borderTop>
    {children}
  </Box>
);