import styled from '@emotion/native';
import { TouchableOpacity, View } from 'react-native';
import Collapse from '../Collapse';

export type Variant = 'default' | 'card';

export const StyledWrapper = styled(View)(() => ({}));

export const StyledItemWrapper = styled(View)<{ themeVariant: Variant }>(
  ({ theme, themeVariant }) => ({
    padding: theme.__hd__.accordion.space.padding,
    backgroundColor: theme.__hd__.accordion.colors.background,
    borderRadius:
      themeVariant === 'card' ? theme.__hd__.accordion.radii.card : 0,
  })
);

export const StyledHeaderWrapper = styled(TouchableOpacity)(() => ({
  flexDirection: 'row',
  justifyContent: 'space-between',
}));

export const StyledCollapse = styled(Collapse)(({ theme }) => ({
  paddingTop: theme.__hd__.accordion.space.padding,
}));

export const Spacer = styled(View)(({ theme }) => ({
  paddingTop: theme.__hd__.accordion.space.padding,
}));