import { useState } from "react"
import "./HiddenText.css"
const TextList = [
{textStart: "Twenty-five hours had passed since the incident. It seemed to be a lot longer than that.",
textEnd: " That twenty-five hours seemed more like a week in her mind. The fact that she still was having trouble comprehending exactly what took place wasn't helping the matter. She thought if she could just get a little rest the entire incident might make a little more sense.",
threeDots: "...",
key: 1},
{textStart: "Another productive way to use this tool to begin a daily writing routine.",
textEnd: " One way is to generate a random paragraph with the intention to try to rewrite it while still keeping the original meaning. The purpose here is to just get the writing started so that when the writer goes onto their day's writing projects, words are already flowing from their fingers.",
threeDots: "...",
key: 2},
{textStart: "Another productive way to use this tool to begin a daily writing routine.",
textEnd: " One way is to generate a random paragraph with the intention to try to rewrite it while still keeping the original meaning. The purpose here is to just get the writing started so that when the writer goes onto their day's writing projects, words are already flowing from their fingers.",
threeDots: "...",
key: 3},
{textStart: "Another productive way to use this tool to begin a daily writing routine.",
textEnd: " One way is to generate a random paragraph with the intention to try to rewrite it while still keeping the original meaning. The purpose here is to just get the writing started so that when the writer goes onto their day's writing projects, words are already flowing from their fingers.",
threeDots: "...",
key: 4},
]
export default function HiddenText() {
const [toggleText, setToggleText] = useState(false)
const [toggleThreeDots, setThreeDots] = useState(true)
const [textBtn, setTextBtn] = useState("показать дополнительно")
function openText() {
setToggleText(toggleText => !toggleText)
setThreeDots(toggleThreeDots => !toggleThreeDots)
if (textBtn === "показать дополнительно") {
setTextBtn("скрыть")
} else {
setTextBtn("показать дополнительно")
}
}
return(
<div className="HiddenTextContainer">
{
TextList.map(item => {
return(
<div className="elemCartText" key={item.key}>
<p>
{item.textStart}
{toggleThreeDots && <span>
{item.threeDots}
</span>}
{toggleText && <span>
{item.textEnd}
</span>}
</p>
<button onClick={openText}>
{textBtn}
</button>
</div>
)
})
}
</div>
)
}
