---
/**
 * HighlightBox Component
 * 
 * A versatile component for highlighting content in Markdown files with different styles and icons.
 * 
 * Usage in Markdown:
 * ```md
 * <HighlightBox type="info" title="Information">
 *   This is some important information.
 * </HighlightBox>
 * ```
 */

import { Info, AlertTriangle, CheckCircle, HelpCircle, Lightbulb } from 'lucide-react';

interface Props {
  /**
   * The type of highlight box
   * @default "info"
   */
  type?: 'info' | 'warning' | 'success' | 'error' | 'tip' | 'note';
  
  /**
   * Optional title for the highlight box
   */
  title?: string;
  
  /**
   * Optional custom icon (SVG string)
   */
  icon?: string;
}

const { 
  type = 'info',
  title,
  icon
} = Astro.props;

// Define styles based on type
const styles = {
  info: {
    bg: 'bg-blue-500/10 dark:bg-blue-500/20',
    border: 'border-blue-500/50 dark:border-blue-500/30',
    title: 'text-blue-700 dark:text-blue-300',
    icon: 'text-blue-500',
    component: Info
  },
  warning: {
    bg: 'bg-amber-500/10 dark:bg-amber-500/20',
    border: 'border-amber-500/50 dark:border-amber-500/30',
    title: 'text-amber-700 dark:text-amber-300',
    icon: 'text-amber-500',
    component: AlertTriangle
  },
  success: {
    bg: 'bg-green-500/10 dark:bg-green-500/20',
    border: 'border-green-500/50 dark:border-green-500/30',
    title: 'text-green-700 dark:text-green-300',
    icon: 'text-green-500',
    component: CheckCircle
  },
  error: {
    bg: 'bg-red-500/10 dark:bg-red-500/20',
    border: 'border-red-500/50 dark:border-red-500/30',
    title: 'text-red-700 dark:text-red-300',
    icon: 'text-red-500',
    component: AlertTriangle
  },
  tip: {
    bg: 'bg-primary/10 dark:bg-primary/20',
    border: 'border-primary/50 dark:border-primary/30',
    title: 'text-primary dark:text-primary/80',
    icon: 'text-primary',
    component: Lightbulb
  },
  note: {
    bg: 'bg-gray-500/10 dark:bg-gray-500/20',
    border: 'border-gray-500/50 dark:border-gray-500/30',
    title: 'text-gray-700 dark:text-gray-300',
    icon: 'text-gray-500',
    component: HelpCircle
  }
};

const style = styles[type];
const IconComponent = style.component;

// Default titles based on type if not provided
const defaultTitles = {
  info: 'Information',
  warning: 'Warning',
  success: 'Success',
  error: 'Error',
  tip: 'Tip',
  note: 'Note'
};

const displayTitle = title || defaultTitles[type];
---

<div class={`rounded-lg p-3 my-4 border ${style.bg} ${style.border}`}>
  <div class="flex flex-col gap-2">
    <div class="flex items-center gap-2">
      <div class={`flex-shrink-0 flex items-center justify-center ${style.icon}`}>
        {icon ? (
          <Fragment set:html={icon} />
        ) : (
          <IconComponent className="w-4 h-4" />
        )}
      </div>
      {displayTitle && (
        <h4 class={`text-sm font-medium flex items-center !m-0 ${style.title}`}>
          {displayTitle}
        </h4>
      )}
    </div>
    <div class="prose dark:prose-invert max-w-none text-sm pl-1 highlight-content">
      <slot />
    </div>

<style>
  /* 自定义内容样式 */
  .highlight-content :global(p) {
    margin: 0;
  }
  .highlight-content :global(ul) {
   margin: 0;
  }
  .highlight-content :global(li) {
    margin: 0.5em 0;
  }
</style>
  </div>
</div>