import React, { useEffect, useState } from 'react'

export default function ModeloObservacaoCard({
  text,
  title = 'OBSERVAÇÃO',
  defaultOpen = true,
  className = '',
}) {
  const content = String(text || '').trim()
  const [open, setOpen] = useState(defaultOpen)

  useEffect(() => {
    setOpen(defaultOpen)
  }, [content, defaultOpen])

  if (!content) return null

  const classes = [
    'elaborador-badge',
    'modelo-observacao-card',
    open ? 'is-open' : '',
    className,
  ].filter(Boolean).join(' ')

  return (
    <div className={classes}>
      <button
        type="button"
        className="modelo-observacao-toggle"
        onClick={() => setOpen((prev) => !prev)}
        aria-expanded={open}
        title={open ? 'Recolher observação' : 'Expandir observação'}
      >
        <span className="elaborador-badge-title">{title}</span>
        <span className="modelo-observacao-toggle-icon" aria-hidden="true">▾</span>
      </button>
      {open ? <div className="modelo-observacao-text">{content}</div> : null}
    </div>
  )
}