import { Pencil } from 'lucide-react';
import { Button } from '../../../components/ui/button.tsx';

interface SelectedPatientSummaryProps {
    name: string;
    secondary: string;
    /** Seeded from the visit the clinician has open, and not changed since. */
    fromOpenVisit: boolean;
    canChange: boolean;
    onChange: () => void;
}

/** The chosen patient, saying why when the open visit chose it, with the way to book for someone else. */
const SelectedPatientSummary = ({ name, secondary, fromOpenVisit, canChange, onChange }: SelectedPatientSummaryProps) => (
    <>
        <div className="ahr-receptionist-selected-patient ahr-selected-patient">
            <div className="ahr-selected-patient__text">
                <div className="ahr-selected-patient__label">
                    Patient
                    {fromOpenVisit && <> <span className="ahr-booking-seed-tag">from the open visit</span></>}
                </div>
                <div className="ahr-selected-patient__name">{name}</div>
                <div className="ahr-selected-patient__meta">{secondary}</div>
            </div>

            {canChange && (
                <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="rounded cursor-pointer shrink-0"
                    onClick={onChange}
                    aria-label="Change selected patient"
                >
                    <Pencil className="h-4 w-4" />
                </Button>
            )}
        </div>

        {fromOpenVisit && canChange && (
            <p className="ahr-booking-someone-else">
                Booking for someone else?{' '}
                <button type="button" className="ahr-booking-someone-else__link" onClick={onChange}>
                    Search existing patients
                </button>
            </p>
        )}
    </>
);

export default SelectedPatientSummary;