import styled from '@emotion/native';
import Box from '../Box';

type ThemeIntent = 'light' | 'dark';
type ThemeVariant = 'circular' | 'rectangular' | 'rounded';

const StyledContainer = styled(Box)<{
  themeIntent: ThemeIntent;
  themeVariant: ThemeVariant;
}>(({ theme, themeIntent, themeVariant }) => ({
  backgroundColor:
    themeIntent === 'light'
      ? theme.__hd__.skeleton.colors.lightBackground
      : theme.__hd__.skeleton.colors.darkBackground,
  borderRadius: theme.__hd__.skeleton.radii[themeVariant],
}));

const StyledGradientContainer = styled(Box)<{ themeVariant: ThemeVariant }>(
  ({ theme, themeVariant }) => ({
    overflow: 'hidden',
    borderRadius: theme.__hd__.skeleton.radii[themeVariant],
  })
);

export { StyledContainer, StyledGradientContainer };