import React from 'react';
import { InformationCircleIcon, ExclamationTriangleIcon } from './Icons';

interface InfoPanelProps {
  title?: string;
  type: 'note' | 'info' | 'warning';
  children: React.ReactNode;
}

export const InfoPanel: React.FC<InfoPanelProps> = ({ title, type, children }) => {
  let panelClasses = 'p-4 rounded-md my-6 border-l-4 shadow-md';
  let titleClasses = 'font-semibold mb-2';
  let IconComponent: React.FC<React.SVGProps<SVGSVGElement>> | null = null;

  switch (type) {
    case 'info':
      panelClasses += ' bg-blue-900/30 border-blue-500 text-blue-200';
      titleClasses += ' text-blue-300';
      IconComponent = InformationCircleIcon;
      break;
    case 'warning':
      panelClasses += ' bg-yellow-900/30 border-yellow-500 text-yellow-200';
      titleClasses += ' text-yellow-300';
      IconComponent = ExclamationTriangleIcon;
      break;
    case 'note':
    default:
      panelClasses += ' bg-gray-800 border-purple-500 text-gray-300';
      titleClasses += ' text-purple-300';
      IconComponent = InformationCircleIcon; // Default to info icon for notes
      break;
  }

  return (
    <div className={panelClasses}>
      {title && (
        <div className="flex items-center">
          {IconComponent && <IconComponent className="h-6 w-6 mr-2 flex-shrink-0" />}
          <h4 className={titleClasses}>{title}</h4>
        </div>
      )}
      <div className={`prose prose-sm prose-invert max-w-none ${title ? 'mt-1' : ''} ${IconComponent && !title ? 'ml-8' : ''}`}>
        {children}
      </div>
    </div>
  );
};