import React, { useState } from 'react';
import Router from 'next/router';
// import ReadMoreReact from 'read-more-react';
function AgentDescr(props) {
const { data } = props;
const agentBiz = data.agent ? data.agent.bizname_t : '';
const agentDesc = data.agent ? data.agent.agent_desc_t : '';
// const descWrap = agentDesc;
// const maxLength = 250;
// const idealLength = 200;
// const minimumLength = 180;
// const readMoreText = 'read more...';
const [isShowMore, toggleShowMore] = useState(false);
const onShowMore = () => {
toggleShowMore(true);
};
return (
<div className="ag-desc">
<div className="row">
<div className="col-12 text-center border-top-1">
<h2>About {agentBiz}</h2>
</div>
</div>
<pre className="desc-data noscroll-xy">
{agentDesc && (
<div>
<div
className={
isShowMore
? 'agent-desc-data show-more'
: 'agent-desc-data'
}
>
<div
dangerouslySetInnerHTML={{ __html: agentDesc }}
/>
{/* <pre className="agent-desc-data">{agentDesc}</pre> */}
</div>
{!isShowMore && (
<div>
<button
type="button"
className="btn btn-link show-more-button"
onClick={onShowMore}
>
Show More
</button>
</div>
)}
</div>
)}
</pre>
</div>
);
}
export default AgentDescr;