{"size": 1496, "ext": "js", "max_stars_repo_path": "src/components/common/interests/InterestsListItem.js", "max_stars_repo_name": "denishamann/mindCast", "max_stars_repo_stars_event_min_datetime": "2019-04-14T19:51:10.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-30T19:14:15.000Z", "max_issues_repo_path": "src/components/common/interests/InterestsListItem.js", "max_issues_repo_name": "pedron98/mindCast", "max_issues_repo_issues_event_min_datetime": "2020-03-01T16:40:27.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-12T09:27:16.000Z", "max_forks_repo_path": "src/components/common/interests/InterestsListItem.js", "max_forks_repo_name": "pedron98/mindCast", "max_forks_repo_forks_event_min_datetime": "2019-04-14T21:40:46.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-28T15:51:15.000Z"}
{"max_stars_count": 1020, "max_issues_count": 7, "max_forks_count": 360, "avg_line_length": 21.6811594203, "max_line_length": 125, "alphanum_fraction": 0.6597593583}
// @flow

import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import FastImage from 'react-native-fast-image';
import styled from 'styled-components';

const Wrapper = styled(TouchableOpacity)`
  width: 100%;
  height: ${({ theme }) => theme.metrics.getHeightFromDP('20%')}px;
  margin-bottom: ${({ theme }) => theme.metrics.mediumSize}px;
`;

const PodcastImage = styled(FastImage).attrs(({ uri }) => ({
  source: {
    priority: FastImage.priority.high,
    uri,
  },
}))`
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 4px;
`;

const DarkLayer = styled(View)`
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: ${({ isSelected, theme }) => (isSelected ? theme.colors.interestSelectedColor : theme.colors.darkLayer)};
  border-radius: 4px;
`;

const InterestTitle = styled(Text)`
  font-family: CircularStd-Black;
  font-size: ${({ theme }) => theme.metrics.extraLargeSize}px;
  color: ${({ theme }) => theme.colors.white};
`;

type Props = {
  onPressItem: Function,
  isSelected: boolean,
  imageURL: string,
  title: string,
};

const InterestsListItem = ({
  onPressItem,
  isSelected,
  imageURL,
  title,
}: Props): Object => (
  <Wrapper
    onPress={onPressItem}
  >
    <PodcastImage
      uri={imageURL}
    />
    <DarkLayer
      isSelected={isSelected}
    >
      <InterestTitle>{title}</InterestTitle>
    </DarkLayer>
  </Wrapper>
);

export default InterestsListItem;
