'use client'

export function IncludeOptions({
  includeFindings,
  includeControls,
  includeRiskAssessment,
  onFindingsChange,
  onControlsChange,
  onRiskAssessmentChange,
}: {
  includeFindings: boolean
  includeControls: boolean
  includeRiskAssessment: boolean
  onFindingsChange: (v: boolean) => void
  onControlsChange: (v: boolean) => void
  onRiskAssessmentChange: (v: boolean) => void
}) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Optionen</h2>
      </div>
      <div className="p-4 space-y-3">
        <label className="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            checked={includeFindings}
            onChange={(e) => onFindingsChange(e.target.checked)}
            className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
          />
          <div>
            <p className="text-sm font-medium text-gray-900 dark:text-white">Findings einbeziehen</p>
            <p className="text-xs text-gray-500 dark:text-gray-400">Offene und behobene Vertragsprüfungs-Findings</p>
          </div>
        </label>
        <label className="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            checked={includeControls}
            onChange={(e) => onControlsChange(e.target.checked)}
            className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
          />
          <div>
            <p className="text-sm font-medium text-gray-900 dark:text-white">Control-Status einbeziehen</p>
            <p className="text-xs text-gray-500 dark:text-gray-400">Übersicht aller Kontrollen und deren Erfüllungsstatus</p>
          </div>
        </label>
        <label className="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            checked={includeRiskAssessment}
            onChange={(e) => onRiskAssessmentChange(e.target.checked)}
            className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
          />
          <div>
            <p className="text-sm font-medium text-gray-900 dark:text-white">Risikobewertung einbeziehen</p>
            <p className="text-xs text-gray-500 dark:text-gray-400">Inhärentes und Restrisiko mit Begründung</p>
          </div>
        </label>
      </div>
    </div>
  )
}
