import React, { useState } from 'react';

import { ButtonVariant } from '@/components/button/Button';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import TextareaV2 from '@/components/textarea/TextareaV2';

import { ModalButton } from '../../shared/ModalButton';

interface Props {
  onBack: () => void;
  onSubmit: (customReason: string) => void;
  isLoading?: boolean;
}

const SurveyOtherStep: React.FC<Props> = ({
  onBack,
  onSubmit,
  isLoading = false,
}) => {
  const [customReason, setCustomReason] = useState('');

  const handleSubmit = () => {
    if (customReason.trim()) {
      onSubmit(customReason.trim());
    }
  };

  return (
    <div>
      <p className='mb-6 text-white/80'>We would love to take your feedback</p>

      <div className='mb-6'>
        <TextareaV2
          value={customReason}
          onChange={(e) => setCustomReason(e.target.value)}
          placeholder='Please share your thoughts with us...'
          minRows={4}
          maxLength={500}
          className='border-white/20 bg-white/5'
          textAreaClassName='text-white placeholder:text-white/50'
        />
      </div>

      <div className='flex justify-center gap-3'>
        <ModalButton
          variant={ButtonVariant.LightGlass}
          onClick={onBack}
          disabled={isLoading}
        >
          Back
        </ModalButton>
        <ModalButton
          variant={ButtonVariant.Primary}
          onClick={handleSubmit}
          disabled={isLoading || !customReason.trim()}
          icon={isLoading ? <SpinnerSVG className='fill-black' /> : null}
        >
          {isLoading ? 'Submitting...' : 'Submit'}
        </ModalButton>
      </div>
    </div>
  );
};

export default SurveyOtherStep;