import styled from 'styled-components';
import {View} from 'react-native';
import Typography from '../ui/typography';
import {createAnimationView} from '../animations';

export const NameLabel = styled(Typography)`
  background: rgb(199, 201, 199);
  padding: ${({theme: {spacing}}) => spacing[3]}px;
  position: absolute;
  bottom: ${({theme: {spacing}}) => spacing[3]}px;
  left: 0%;
`;

export const InfoContainer = styled(View)`
  display: flex;
  flex-direction: column;
  padding: ${({theme: {spacing}}) => spacing[4]}px;
`;

export const ShowButton = createAnimationView(
  {opacity: {from: 0, to: 1}, translateY: {from: 10, to: 0}},
  ({opacity, translateY}) => ({
    opacity,
    transform: [{translateY}],
  }),
);

export const ShowLabel = createAnimationView(
  {opacity: {from: 0, to: 1}, translateX: {from: 20, to: 0}},
  ({opacity, translateX}) => ({
    opacity,
    transform: [{translateX}],
  }),
);

export const StyledShowLabel = styled(ShowLabel)`
  background: rgb(199, 201, 199);
  position: absolute;
  left: 0%;
  background: red;
`;