import React from 'react';
import { Input } from '../../common/components/input';
import { theme } from '../../app/theme';
import { SBox } from '../../common/s-components/layout/s-box';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { TValue } from '../types';

type TProps = {
  message: string;
  value?: TValue;
  onChange: (value: TValue) => void;
};

export const SlideText: React.FC<TProps> = props => {
  const { message, onChange, value } = props;
  return (
    <>
      <SBox mt={67} px={16}>
        <SBox mb={34}>
          <SH3 textAlign="center" lineHeight="24px">
            {message}
          </SH3>
        </SBox>
        <Input
          onChange={onChange}
          // ref={ref}
          value={value}
          disabled={false}
          placeholder="Leave your feedback"
          placeholderTextColor={theme.colors.logan}
          variant="textarea"
        />
      </SBox>
    </>
  );
};