import React, {ReactNode} from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import {CardContainer, PressableCardContainer} from '@components';

import {styles} from './styles';

export interface SportsPoolHeaderCardProps {
  children: ReactNode;
  onPress?: () => void;
  hasShadow?: boolean;
  noPadding?: boolean;
  style?: StyleProp<ViewStyle>;
}

export function SportsPoolHeaderCard({
  children,
  onPress,
  hasShadow,
  noPadding,
  style,
}: SportsPoolHeaderCardProps) {
  const containerStyle: StyleProp<ViewStyle> = [
    styles.container,
    noPadding && styles.noPadding,
    style,
  ];

  if (onPress) {
    return (
      <PressableCardContainer
        onPress={onPress}
        elevation={hasShadow}
        style={containerStyle}>
        {children}
      </PressableCardContainer>
    );
  }

  return (
    <CardContainer elevation={hasShadow} style={containerStyle}>
      {children}
    </CardContainer>
  );
}

export default SportsPoolHeaderCard;