import   { useState } from 'react';
interface OverviewProps {
  description: string;
}

const Overview: React.FC<OverviewProps> = ({ description }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggle = () => {
    setIsExpanded(prevState => !prevState);
  };
    const formatDescription = (text: string) => {
        const formattedText = text.replace(/\n/g, '<br />'); // Replace newlines with <br> tags
        return { __html: formattedText }; // Return HTML-safe object
    };
  return (
    <div className="list list-check">
      <h3 className='heading-primary-text dark-bg-light'>Property Overview</h3>
      <div className={`content-font ${isExpanded ? '' : 'text-t'}`} id="dec-det">
              <div
                  className={`content-font ${isExpanded ? '' : 'text-t'}`}
                  id="dec-det"
                  dangerouslySetInnerHTML={formatDescription(description)} // Inject raw HTML
              />
      </div>
      <a
        href="#"
        onClick={handleToggle}
        className="mt-3 content-font"
        style={{
          color: 'var(--logo-color)',
          display: 'block',
          fontWeight: 600,
          marginBottom: '40px',
        }}
      >
        {isExpanded ? 'Read less' : 'Read more'}
      </a>
    </div>
  );
};

export default Overview;
