import React, { useState } from 'react';
import styled from 'styled-components';

// Стилизованные компоненты
const Container = styled.div`
  position: relative;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
`;

const StyledTextarea = styled.textarea`
  width: 100%;
  min-height: 224px;
  /* Добавляем нижний отступ, чтобы текст не заезжал под счетчик */
  padding: 16px 16px 40px 16px; 
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  color: #0C3B2E;
  background: white;
  resize: vertical; /* Разрешаем растягивать по высоте */
  outline: none;
  transition: border-color 0.2s ease-in-out;
  box-sizing: border-box;

  &::placeholder {
    color: #a0a0a0;
  }

    &:hover {
        border-color: #a0a0a0;  
    }
  &:focus {
      border-color: #72b541;
  }
`;

const Counter = styled.div`
  position: absolute;
  bottom: -20px;
  right: 0;
  font-size: 14px;
  color: #9ca3af;
  user-select: none;
  pointer-events: none;
`;

// Интерфейс пропсов
interface FeedbackTextareaProps {
    placeholder?: string;
    maxLength?: number;
}

interface FeedbackTextareaProps {
    value: string;
    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
    placeholder?: string;
    maxLength?: number;
}

const FeedbackTextarea: React.FC<FeedbackTextareaProps> = ({
                                                               value,
                                                               onChange,
                                                               placeholder = 'Напишите, что бы вы хотели поменять',
                                                               maxLength = 250,
                                                           }) => {
    return (
        <Container>
            <StyledTextarea
                value={value}
                onChange={onChange}
                placeholder={placeholder}
                maxLength={maxLength}
            />
            <Counter>
                {value.length}/{maxLength}
            </Counter>
        </Container>
    );
};

export default FeedbackTextarea;