import React from 'react'

/**
 * Sliding detail drawer panel
 * open: bool, onClose: fn, title: string, grain: string, children: ReactNode
 */
export default function DetailPanel({ open, onClose, title, grain, children }) {
  return (
    <>
      <div className={`ovl${open ? ' open' : ''}`} onClick={onClose} />
      <div className={`dp${open ? ' open' : ''}`}>
        <div className="dph">
          <span className="dpg">{grain}</span>
          <span className="dpt">{title}</span>
          <button className="dpc" onClick={onClose}>✕</button>
        </div>
        <div className="dpb">{children}</div>
      </div>
    </>
  )
}