import React, { useState } from 'react'

const COLLAPSE_AT = 560

export default function ArtworkDescription({ artwork }) {
  const [expanded, setExpanded] = useState(false)
  const content = (artwork?.description || '').trim()
  const contentHtml = (artwork?.description_html || '').trim()
  const collapsed = content.length > COLLAPSE_AT && !expanded

  if (content.length === 0) return null

  return (
    <div>
      <div
        className={[
          'max-w-[720px] overflow-hidden transition-[max-height] duration-300',
          collapsed ? 'max-h-[11.5rem]' : 'max-h-[100rem]',
        ].join(' ')}
      >
        <div
          className="prose prose-invert max-w-none text-sm leading-7 prose-p:my-3 prose-p:text-white/50 prose-a:text-accent prose-a:no-underline hover:prose-a:underline prose-strong:text-white/80 prose-em:text-white/70 prose-code:text-white/80"
          dangerouslySetInnerHTML={{ __html: contentHtml }}
        />
      </div>

      {content.length > COLLAPSE_AT && (
        <button
          type="button"
          className="mt-3 text-sm font-medium text-accent transition-colors hover:text-accent/80"
          onClick={() => setExpanded((value) => !value)}
        >
          {expanded ? 'Show less' : 'Show more'}
        </button>
      )}
    </div>
  )
}