'use client'
import React, { useState } from 'react'

interface ShowMoreProps {
  text?: string
}

const ShowMore = ({ text }: ShowMoreProps) => {
  const [isExpandedMobile, setIsExpandedMobile] = useState(false)
  const [isExpandedDesktop, setIsExpandedDesktop] = useState(false)

  if (!text) return null

  const maxLength = {
    mobile: 100,
    desktop: 100,
  }

  return (
    <div className="pb-5">
      {/* мобила */}
      <div
        onClick={() => setIsExpandedMobile(!isExpandedMobile)}
        className={`lg:hidden text-justify relative cursor-pointer overflow-hidden
          ${isExpandedMobile ? 'max-h-[2000px]' : 'max-h-[300px]'}`}
      >
        {isExpandedMobile ? text : text.slice(0, maxLength.mobile)}
        {!isExpandedMobile && text.length > maxLength.mobile && (
          <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent" />
        )}
      </div>

      {/* десктоп */}
      <div
        onClick={() => setIsExpandedDesktop(!isExpandedDesktop)}
        className={`hidden lg:block text-justify relative cursor-pointer overflow-hidden
          ${isExpandedDesktop ? 'max-h-[2000px]' : 'max-h-[300px]'}`}
      >
        {isExpandedDesktop ? text : text.slice(0, maxLength.desktop)}
        {!isExpandedDesktop && text.length > maxLength.desktop && (
          <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent" />
        )}
      </div>
    </div>
  )
}

export default ShowMore