import { StyleSheet, View, type ViewStyle, type StyleProp } from 'react-native';
import { withTheme, useTheme } from '../../core/theming';
import type { Theme } from '../../utils/types';
import AImage from '../TImage/TImage';

type Props = {
  sourceUri?: string;
  height?: number;
  width?: number | string;
  style?: StyleProp<ViewStyle>;
  theme: Theme;
};

const CardCover = ({ height, width, style, ...rest }: Props): any => {
  const { colors } = useTheme();
  const stylesWithProp = styles({ colors });
  return (
    <View style={[stylesWithProp.container, style]}>
      <AImage {...rest} height={height || 190} width={width ? width : '100%'} />
    </View>
  );
};

CardCover.displayName = 'Card.Cover';
const styles = (props: { colors: any }) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: props.colors.background,
      alignSelf: 'center',
      width: '100%',
    },
    image: {
      flex: 1,
    },
  });

export default withTheme(CardCover);