/*
 * 카드 — 흰색 서피스 + 1px 테두리(그림자 최소, design.md §1-4 엘리베이션).
 * accent: 'ai'면 좌측 4px 보라 액센트, 'status'면 좌측 4px 상태색.
 */
import React from 'react';
import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
import { colors, radius, spacing } from '../theme';

interface Props {
  children: React.ReactNode;
  accent?: 'none' | 'ai' | 'warning' | 'error' | 'success';
  style?: StyleProp<ViewStyle>;
}

const accentColor: Record<NonNullable<Props['accent']>, string | undefined> = {
  none: undefined,
  ai: colors.aiAccent,
  warning: colors.warning,
  error: colors.error,
  success: colors.success,
};

export function Card({ children, accent = 'none', style }: Props) {
  const left = accentColor[accent];
  return (
    <View
      style={[
        styles.card,
        accent === 'ai' && { backgroundColor: colors.aiSurface },
        left ? { borderLeftWidth: 4, borderLeftColor: left } : null,
        style,
      ]}
    >
      {children}
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.white,
    borderWidth: 1,
    borderColor: colors.neutral200,
    borderRadius: radius.md,
    padding: spacing.md,
  },
});