import React, { useCallback } from 'react';
import { HistoricalLandmark } from '@/types.ts';
import Button from '@/components/ui/Button.tsx';
import Spinner from '@/components/ui/Spinner.tsx';
import ErrorMessage from '@/components/ui/ErrorMessage.tsx';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { useGenerateHistoricalContext } from '@/hooks/useGemini.ts';

interface HistoricalContextAIProps {
  landmark: HistoricalLandmark;
}

const HistoricalContextAI = ({ landmark }: HistoricalContextAIProps) => {
  const { t } = useTranslation();
  const { data, error, isPending, refetch } = useGenerateHistoricalContext(landmark, t);

  const handleGenerate = useCallback(() => {
    refetch();
  }, [refetch]);

  return (
    <div>
      {!data && (
        <div className="text-center">
          <p className="mb-2 text-sm text-muted-foreground">{t('historicalContext.prompt')}</p>
          <Button onClick={handleGenerate} disabled={isPending} size="sm">
            {isPending ? <Spinner className="h-4 w-4" /> : t('historicalContext.generateButton')}
          </Button>
        </div>
      )}

      {error && <ErrorMessage message={error.message} />}

      {data && (
        <div>
          <h4 className="mb-2 text-base font-semibold">{t('historicalContext.title')}</h4>
          <blockquote className="border-l-4 border-primary pl-4 italic text-muted-foreground">
            {data}
          </blockquote>
        </div>
      )}
    </div>
  );
};

export default React.memo(HistoricalContextAI);