import styled from 'styled-components';
import {View, TouchableOpacity} from 'react-native';
import {createAnimationView} from '../animations';

export const ChannelContainer = styled(View)`
  padding: ${({theme: {spacing}}) => spacing[0]}px;
  width: 100%;
  display: flex;
  flex-direction: row;

  flex-wrap: wrap;
`;

export const Head = styled(View)`
  padding: ${({theme: {spacing}}) => spacing[4]}px;
  padding-left: ${({theme: {spacing}}) => spacing[5]}px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`;

export const ChannelItemContainer = styled(TouchableOpacity)`
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

export const ChannelSelectedLine = styled(TouchableOpacity)`
  width: 80%;
  height: 2px;

  background: ${({theme: {color}}) => color.primary};
`;

export const ShowChannel = createAnimationView(
  {opacity: {from: 0, to: 1}, scale: {from: 0.8, to: 1}},
  ({opacity, scale}) => ({
    opacity,
    transform: [{scale}],
  }),
);