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

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

const Card = ({
  intent,
  children,
  variant = 'basic',
  ...nativeProps
}: CardProps): ReactElement => {
  return (
    <StyledCard {...nativeProps} themeIntent={intent} themeVariant={variant}>
      {children}
    </StyledCard>
  );
};

export default Object.assign(Card, {
  Data: DataCard,
  DataContent: StyledDataCardContent,
});