'use client';

/**
 * BlockSection Component
 *
 * Groups related content within a Cortex block with a header.
 *
 * Epic: E1.S1 - Block Layout
 */

import type { ReactNode } from 'react';
import type { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

interface BlockSectionProps {
  /** Icoon component */
  icon: LucideIcon;
  /** Tailwind kleur class voor icoon */
  iconColor?: string;
  /** Sectie titel */
  title: string;
  /** Optionele count badge */
  count?: number;
  /** Sectie inhoud */
  children: ReactNode;
  /** Extra CSS classes */
  className?: string;
}

/**
 * Section wrapper for Cortex blocks.
 * Shows icon + title header with optional count, wraps children content.
 */
export function BlockSection({
  icon: Icon,
  iconColor = 'text-slate-600',
  title,
  count,
  children,
  className,
}: BlockSectionProps) {
  return (
    <section
      className={cn(
        'bg-white rounded-lg border border-slate-200 p-4',
        className
      )}
    >
      {/* Header */}
      <div className="flex items-center gap-2 mb-3">
        <Icon className={cn('h-4 w-4', iconColor)} />
        <h3 className="text-sm font-medium text-slate-700">{title}</h3>
        {count !== undefined && (
          <span className="text-xs text-slate-500">({count})</span>
        )}
      </div>

      {/* Content */}
      {children}
    </section>
  );
}