'use client';

import React from 'react';
import ImagesManager from './ImagesManager';
import type { PanelProps } from './panelTypes';

export default function PhotosPanel({ model, canEdit }: PanelProps) {
  const id = model.report.id;
  return (
    <div>
      <div className="rb-banner rb-banner-info">
        Pictures are saved as soon as you add them. They print in the PDF and the Word file under the section you choose here
        (in the order shown, with their captions). You can also add pictures to a single clause row from the <strong>Clauses</strong> tab.
      </div>

      <div className="rb-card">
        <div className="rb-card-head">
          <h3 className="rb-card-title"><span className="rb-card-bar" /> Brief about the organization — products / premises</h3>
        </div>
        <ImagesManager reportId={id} canEdit={canEdit} sectionKey="org_brief" />
      </div>

      <div className="rb-card">
        <div className="rb-card-head">
          <h3 className="rb-card-title"><span className="rb-card-bar" /> Audit brief and facts — audit photos</h3>
        </div>
        <ImagesManager reportId={id} canEdit={canEdit} sectionKey="audit_brief" />
      </div>
    </div>
  );
}