'use client';

import classnames from 'classnames';
import { useState } from 'react';
import EmployerSelect from './EmployerSelect';
import CoverageViewer from './CoverageViewer';

interface CoverageSelectorProps {
  role: string;
  roleId: string;
}

const CoverageSelector: React.FC<CoverageSelectorProps> = ({ role, roleId }) => {
  const [selectedEmployer, setSelectedEmployer] = useState<string | null>(null);

  const handleSelectedEmployer = (plPlanKey: string): void => {
    setSelectedEmployer(null);
    setSelectedEmployer(plPlanKey);
  };

  return (
    <div className={classnames("w-full flex flex-col px-2 text-lg")}>
        <EmployerSelect
            onSelectionCompleteEmployer={handleSelectedEmployer}
            userRole={role}
            roleId={roleId}
        />
        {/* {selectedMember && (
          <IdCardViewer 
            cardLaout='FullPageCard'
            pbEntityKey={selectedMember}
            autoFetchCard
          />
        )} */}
        {selectedEmployer && (
          <CoverageViewer 
            plPlanKey={selectedEmployer}
          />
        )}
    </div>
  );
}

export default CoverageSelector;