import React from 'react';

interface HighlightBoxProps {
  title?: string;
  children: React.ReactNode;
  color?: 'primary' | 'secondary' | 'accent';
}

const colorStyles = {
  primary: 'bg-gradient-to-br from-primary/10 to-primary/5 border-primary/30',
  secondary: 'bg-gradient-to-br from-blue-50 to-blue-100/50 border-blue-200',
  accent: 'bg-gradient-to-br from-green-50 to-green-100/50 border-green-200',
};

export default function HighlightBox({ title, children, color = 'primary' }: HighlightBoxProps) {
  return (
    <div className={`my-10 p-8 rounded-2xl border-2 ${colorStyles[color]} shadow-sm`}>
      {title && (
        <h3 className="text-2xl font-bold text-text-primary mb-4 flex items-center gap-3">
          <span className="w-1.5 h-8 bg-primary rounded-full"></span>
          {title}
        </h3>
      )}
      <div className="prose prose-lg max-w-none">
        {children}
      </div>
    </div>
  );
}