import { Pressable } from 'react-native';
import React from 'react';
import { SRow } from '../../../common/s-components/layout/s-row';
import { SSliderLabelHolder } from '../../s-components/s-slider-label-holder';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { SText } from '../../../common/s-components/typography/s-text';
import { openUrl } from '../../../common/utils/linking-service';
import { SBox } from '../../../common/s-components/layout/s-box';
import { Icon } from '../../../common/components/icon';
import { TVendor } from '../../../common/types';

type TProps = {
  updated_date: string;
  vendor: TVendor;
  link: string;
};

export const Slide2: React.FC<TProps> = ({ updated_date, vendor, link }) => {
  const isApple = vendor === 'apple';

  return (
    <SBox px={68} pt={isApple ? 54 : 38}>
      <SRow mb={14}>
        <SSliderLabelHolder>
          <SH6>updated</SH6>
        </SSliderLabelHolder>
        <SText ml={3} medium>
          {updated_date}
        </SText>
      </SRow>
      <SRow>
        <SSliderLabelHolder>
          <SH6>link</SH6>
        </SSliderLabelHolder>
        <Pressable testID="playlist-link" onPress={() => openUrl(link)}>
          <SBox
            height={44}
            width={44}
            ml={-11}
            mt={-11}
            justifyContent="center"
            alignItems="center"
          >
            <Icon name={vendor} color="white" size={22} />
          </SBox>
        </Pressable>
      </SRow>
    </SBox>
  );
};