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';
import { Text, Heading } from '@/components/ui/Typography.tsx';
import { Stack } from '@/components/ui/layout';

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 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 (
    <Stack spacing={size === 'small' ? 'xs' : 'sm'} className="text-center">
      {title && (
        <Heading
          level={size === 'small' ? 'h5' : 'h4'}
          className={size === 'small' ? 'text-sm' : 'text-base'}
        >
          {title}
        </Heading>
      )}
      <Text variant="muted" className={size === 'small' ? 'text-xs' : 'text-sm'}>
        {description}
      </Text>
      <Button size={buttonSize} onClick={onAction} disabled={isPending} className="w-full">
        {buttonText}
      </Button>
      {error && <ErrorMessage message={error} className="mt-2" />}
      {children}
    </Stack>
  );
};

export default React.memo(IntelligenceModule);