import { View } from 'react-native';
import styled from '@emotion/native';

const StyledDataCard = styled(View)(({ theme }) => ({
  borderRadius: theme.__hd__.card.radii.default,
  overflow: 'hidden',
  flexDirection: 'row',
  backgroundColor: theme.__hd__.card.colors.dataCardBackground,
}));

const StyledDataCardContent = styled(View)(({ theme }) => ({
  backgroundColor: 'transparent',
  padding: theme.__hd__.card.space.dataCardContentPadding,
}));

const Indicator = styled(View)<{
  themeIntent:
    | 'success'
    | 'info'
    | 'warning'
    | 'danger'
    | 'archived'
    | 'primary';
}>(({ theme, themeIntent }) => ({
  backgroundColor: theme.__hd__.card.colors[themeIntent],
  width: theme.__hd__.card.sizes.indicatorWidth,
  height: '100%',
}));

export { StyledDataCard, Indicator, StyledDataCardContent };