import React from 'react';
import Scribble from '@/components/Scribble';

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

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

export default function HighlightBox({ title, children, color = 'primary' }: HighlightBoxProps) {
  return (
    <div className={`my-12 p-8 md:p-10 rounded-3xl border ${colorStyles[color]} shadow-sm relative overflow-hidden group`}>
      {/* Industrial accent corner */}
      <div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
      
      {title && (
        <h3 className="text-xl md:text-2xl font-bold text-text-primary mb-6 flex items-center gap-4 relative">
          <span className="relative">
            {title}
            {color === 'accent' && (
              <Scribble 
                variant="underline" 
                className="absolute -bottom-2 left-0 w-full h-3 text-accent/40" 
              />
            )}
          </span>
        </h3>
      )}
      <div className="prose prose-base md:prose-lg max-w-none relative z-10">
        {children}
      </div>
    </div>
  );
}