import React from "react";

interface InfoBoxProps {
  type?: "default" | "gradient" | "stat" | "highlight";
  className?: string;
  children: React.ReactNode;
}

/**
 * InfoBox component for styled content sections in blog posts
 * Supports various visual styles for different content types
 */
export default function InfoBox({
  type = "default",
  className = "",
  children,
}: InfoBoxProps) {
  const baseClasses = "my-8 rounded-xl overflow-hidden";

  const typeClasses = {
    default:
      "bg-white dark:bg-slate-800 p-6 border border-gray-200 dark:border-gray-700 shadow-md",
    gradient:
      "bg-gradient-to-br from-blue-50 to-emerald-50 dark:from-blue-950/30 dark:to-emerald-950/30 p-6 border border-blue-200 dark:border-blue-800",
    stat: "bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/30 dark:to-pink-950/30 p-6 border border-purple-200 dark:border-purple-800",
    highlight:
      "bg-gradient-to-r from-brand-green/10 to-emerald-500/10 dark:from-brand-green/20 dark:to-emerald-500/20 p-6 border-l-4 border-brand-green",
  };

  return (
    <div className={`${baseClasses} ${typeClasses[type]} ${className}`}>
      {children}
    </div>
  );
}