import React from 'react';
import { View } from '@tarojs/components';
import { CSSProperties, ReactNode, useMemo } from 'react';
import './index.scss';

interface ContentCardProps {
  variant?: 'default' | 'outlined' | 'elevated';
  onPress?: () => void;
  padding?: 'none' | 'sm' | 'md' | 'lg';
  margin?: 'none' | 'md';
  activeFeedback?: 'bg' | 'opacity' | 'scale' | 'none';
  className?: string;
  style?: CSSProperties;
  children: ReactNode;
}

const PADDING_MAP = {
  none: '0',
  sm: 'var(--tk-card-padding-sm)',
  md: 'var(--tk-card-padding)',
  lg: 'var(--tk-card-padding-lg)',
} as const;

const MARGIN_MAP = {
  none: '0',
  md: 'var(--tk-gap-md)',
} as const;

const ContentCard: React.FC<ContentCardProps> = ({
  variant = 'default',
  onPress,
  padding = 'md',
  margin = 'md',
  activeFeedback = 'bg',
  className,
  style,
  children,
}) => {
  const innerStyle = useMemo(() => ({
    padding: PADDING_MAP[padding],
    marginBottom: MARGIN_MAP[margin],
    ...style,
  }), [padding, margin, style]);

  const hasPress = !!onPress;
  const cls = [
    'content-card',
    `content-card--${variant}`,
    hasPress && 'content-card--pressable',
    hasPress && activeFeedback !== 'none' && `content-card--feedback-${activeFeedback}`,
    className,
  ].filter(Boolean).join(' ');

  return (
    <View className={cls} style={innerStyle} onClick={onPress}>
      {children}
    </View>
  );
};

export default React.memo(ContentCard);