import React, { ComponentProps, PropsWithChildren } from 'react';
import { Divider, Heading, View } from 'native-base';
import cn from 'classnames';
import { COLORS } from '../../theme';
import { useDarkMode } from '../../hooks';

type WithTitle = { title: string; showDivider?: boolean };
type WithoutTitle = { title?: never; showDivider?: never };

type CardProps = {
  className?: string;
} & ComponentProps<typeof View> &
  (WithTitle | WithoutTitle);

/**
 * Wrapper designed to be used as a container for other components.
 */
const Card = ({
  title,
  className,
  showDivider = true,
  children,
  ...rest
}: PropsWithChildren<CardProps>) => {
  const isDarkMode = useDarkMode();

  return (
    <View
      bg={COLORS.white}
      _dark={{ bg: COLORS.gray[800] }}
      shadow={isDarkMode ? '0' : '1'}
      className={cn(
        'rounded-xl p-4',

        className,
      )}
      {...rest}
    >
      {title && (
        <>
          <Heading size="md" className="mb-1">
            {title}
          </Heading>
          {showDivider && <Divider className="mb-1" />}
        </>
      )}

      {children}
    </View>
  );
};

export default Card;
