import { t } from 'i18next';
import { AlertCircle } from 'lucide-react';
import React from 'react';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { LoadingSpinner } from '@/components/ui/spinner';

type SimulationSectionProps = {
  note: React.ReactNode;
  resetSimulation: () => void;
  abortControllerRef: React.MutableRefObject<AbortController>;
};

export const SimulationNote = ({
  note,
  resetSimulation,
  abortControllerRef,
}: SimulationSectionProps) => {
  return (
    <div className="flex flex-col gap-4 w-full">
      <div className="flex gap-2 items-center justify-center w-full">
        <LoadingSpinner className="w-4 h-4"></LoadingSpinner>
        <div>{t('Testing Trigger')}</div>
        <div className="flex-grow"></div>

        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            resetSimulation();
            abortControllerRef.current.abort();
            abortControllerRef.current = new AbortController();
          }}
        >
          {t('Cancel')}
        </Button>
      </div>

      {note && (
        <Alert className="bg-warning/5 border-warning/5 ">
          <AlertCircle className="h-4 w-4 text-warning" />
          <div className="flex flex-col gap-1">
            <AlertTitle>{t('Action Required')}:</AlertTitle>
            <AlertDescription>
              <div className="break-wrods">{note}</div>
            </AlertDescription>
          </div>
        </Alert>
      )}
    </div>
  );
};
