// practitioner#s-video-visit board 12: an invited practitioner writes private notes about this visit's
// patient, drawn as the encounter page draws them for a non-host - the one "Private note" segment, the
// private band, then the notes. Never the host's clinical note or care plan.
import { Lock } from 'lucide-react';
import PatientNotes from '../PatientNotes/PatientNotes';
import { useIsPhoneWidth } from '../../hooks/useIsPhoneWidth';
import '../../pages/DashboardPage/ClinicianOverviewPage/EncounterDocumentation.css';

export const InvitedPrivateNotes = ({ patientId }: { patientId: string }) => {
    const isPhone = useIsPhoneWidth();
    return (
        <div className="overflow-hidden">
            <div className="flex items-center gap-2 border-b border-line bg-sunken p-2">
                <div className="btn-segmented ahr-note-tabs min-w-0 max-w-full overflow-x-auto" role="group" aria-label="Note">
                    <button type="button" aria-pressed="true" className={isPhone ? 'btn btn-blue-ghost-sm' : 'btn btn-blue-ghost'}>
                        Private note
                    </button>
                </div>
            </div>
            <p className="ahr-note-band ahr-note-band--private"><Lock className="w-3.5 h-3.5" />Private — not shown to the patient</p>
            <div className="p-3">
                <PatientNotes patientId={patientId} variant="meeting" />
            </div>
        </div>
    );
};