import { Heading, Text } from '@/components/ui/Typography.tsx';
import { Stack } from '@/components/ui/layout';
import React from 'react';

export interface WebIntelSource {
  uri: string;
  title?: string;
}

interface WebIntelSourcesListProps {
  sources: WebIntelSource[];
  title: string;
  className?: string;
}

/**
 * Reusable component for displaying a list of web intelligence sources
 * with proper semantic HTML and styling
 */
export const WebIntelSourcesList: React.FC<WebIntelSourcesListProps> = ({
  sources,
  title,
  className,
}) => {
  const validSources = sources.filter((source) => source?.uri);

  if (validSources.length === 0) {
    return null;
  }

  return (
    <div className={className}>
      <Heading level="h5" className="mb-2">
        {title}
      </Heading>
      <ul className="space-y-1 list-disc list-inside">
        {validSources.map((source) => (
          <li key={source.uri}>
            <Text as="span" variant="small">
              <a
                href={source.uri}
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:underline truncate"
              >
                {source.title || source.uri}
              </a>
            </Text>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default React.memo(WebIntelSourcesList);