import React from 'react';
import type { ReactElement, ReactNode } from 'react';
import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
import { StyledDataCard, Indicator } from './StyledDataCard';

export interface DataCardProps extends ViewProps {
  /**
   * Card's content.
   */
  children?: ReactNode;
  /**
   * Visual intent color to apply to card.
   */
  intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
  /**
   * Additional style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
}

const DataCard = ({
  intent = 'info',
  children,
  ...nativeProps
}: DataCardProps): ReactElement => (
  <StyledDataCard {...nativeProps}>
    <Indicator themeIntent={intent} testID="data-card-indicator" />
    {children}
  </StyledDataCard>
);

export default DataCard;