import React from 'react';
import Button from '@/components/ui/Button.tsx';
import Skeleton from '@/components/ui/Skeleton.tsx';
import ErrorMessage from '@/components/ui/ErrorMessage.tsx';

interface IntelligenceModuleProps {
  title?: string;
  description: string;
  buttonText: string;
  onAction: () => void;
  isPending: boolean;
  error: string | null;
  children?: React.ReactNode;
  size?: 'default' | 'small';
}

const IntelligenceModule = ({
  title,
  description,
  buttonText,
  onAction,
  isPending,
  error,
  children,
  size = 'default',
}: IntelligenceModuleProps) => {
  const titleClass = size === 'small' ? 'text-sm font-semibold' : 'text-base font-semibold';
  const descriptionClass =
    size === 'small' ? 'text-xs text-muted-foreground mb-3' : 'text-sm text-muted-foreground';
  const buttonSize = size === 'small' ? 'sm' : 'default';

  if (isPending) {
    if (size === 'small') {
      return (
        <div className="space-y-2 text-left">
          <Skeleton className="h-4 w-3/4" />
          <Skeleton className="h-3 w-full" />
          <Skeleton className="h-3 w-5/6" />
          <Skeleton className="h-8 w-full mt-2" />
        </div>
      );
    }
    return (
      <div className="space-y-3">
        <Skeleton className="h-5 w-3/4 mx-auto" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-5/6 mx-auto" />
        <Skeleton className="h-10 w-full mt-2" />
      </div>
    );
  }

  return (
    <div className="text-center">
      {title && <p className={titleClass}>{title}</p>}
      <p className={descriptionClass}>{description}</p>
      <Button size={buttonSize} onClick={onAction} disabled={isPending} className="w-full">
        {buttonText}
      </Button>
      {error && <ErrorMessage message={error} className="mt-2" />}
      {children}
    </div>
  );
};

export default React.memo(IntelligenceModule);