import React, {Fragment} from 'react';
import {useTranslation} from 'react-i18next';
import {CardContainer, Divider, Pressable, Typography} from '@components';
import {PinDuration} from '@modules/chats/constants';

import {styles} from './styles';

interface Option {
  label: string;
  value: PinDuration;
}

interface Props {
  options: Option[];
  onDurationPress: (duration: PinDuration) => void;
}

export function DialogPinDurationContent({options, onDurationPress}: Props) {
  const {t} = useTranslation();

  return (
    <>
      <Typography>{t('chat.pin.dialog.description')}</Typography>
      <CardContainer style={styles.optionsContainer}>
        {options.map((option, index) => (
          <Fragment key={option.value}>
            <Pressable onPress={() => onDurationPress(option.value)}>
              <Typography variant="xs" weight="semiBold">
                {option.label}
              </Typography>
            </Pressable>
            {index !== options.length - 1 && <Divider />}
          </Fragment>
        ))}
      </CardContainer>
    </>
  );
}
