'use client';

import React, { Dispatch, SetStateAction } from 'react';

import { Trans } from '@kit/ui/makerkit/trans';
import { Button } from '@kit/ui/shadcn/button';

const DoctorRecommendedAnalyses = ({
  recommendedAnalyses,
  availableAnalyses,
  setRecommendedAnalyses,
}: {
  recommendedAnalyses?: string[];
  availableAnalyses?: string[];
  setRecommendedAnalyses: Dispatch<SetStateAction<string[]>>;
}) => {
  if (availableAnalyses?.length === 0) {
    return null;
  }

  return (
    <div>
      <h5>
        <Trans i18nKey="doctor:recommendedAnalyses" />
      </h5>
      <div className="mt-4 flex gap-2">
        {availableAnalyses?.map((analysis, index) => {
          return (
            <Button
              size="sm"
              key={`${index}-analysis-feedback-list`}
              variant={
                recommendedAnalyses?.includes(analysis) ? 'default' : 'outline'
              }
              type="button"
              onClick={() =>
                setRecommendedAnalyses((prev: string[]) =>
                  prev.includes(analysis)
                    ? prev.filter((x) => x !== analysis)
                    : [...prev, analysis],
                )
              }
            >
              {analysis}
            </Button>
          );
        })}
      </div>
    </div>
  );
};

export default DoctorRecommendedAnalyses;