import type { ReactNode } from 'react'

type Props = {
  indexNode: ReactNode
  nameNode: ReactNode
  typeNode: ReactNode
  materialsNode: ReactNode
  yearNode: ReactNode
  statusNode: ReactNode
  descriptionNode: ReactNode
  specsNode: ReactNode
  notesNode: ReactNode
  imageUrl?: string | null
  imageAlt?: string
}

export function ProductPanelInfo({
  indexNode,
  nameNode,
  typeNode,
  materialsNode,
  yearNode,
  statusNode,
  descriptionNode,
  specsNode,
  notesNode,
  imageUrl,
  imageAlt,
}: Props) {
  return (
    <div className="panel-inner">
      <div className="panel-img-col">
        <div className="panel-gallery">
          <img src={imageUrl ?? ''} alt={imageAlt ?? 'Image produit REBOURS Studio'} />
        </div>
      </div>
      <div className="panel-info-col">
        <p className="panel-index">{indexNode}</p>
        <h2>{nameNode}</h2>
        <hr />
        <div className="panel-meta">
          <div className="panel-meta-row">
            <span className="meta-key">TYPE</span>
            <span>{typeNode}</span>
          </div>
          <div className="panel-meta-row">
            <span className="meta-key">MATÉRIAUX</span>
            <span>{materialsNode}</span>
          </div>
          <div className="panel-meta-row">
            <span className="meta-key">ANNÉE</span>
            <span>{yearNode}</span>
          </div>
          <div className="panel-meta-row">
            <span className="meta-key">STATUS</span>
            <span className="red">{statusNode}</span>
          </div>
        </div>
        <hr />
        <p className="panel-desc">{descriptionNode}</p>
        <hr />
        <details className="accordion" open>
          <summary>
            SPÉCIFICATIONS TECHNIQUES <span>↓</span>
          </summary>
          <div className="accordion-body">{specsNode}</div>
        </details>
        <details className="accordion" open>
          <summary>
            NOTES DE CONCEPTION <span>↓</span>
          </summary>
          <div className="accordion-body">{notesNode}</div>
        </details>
      </div>
    </div>
  )
}
