import { AlertCircle } from 'lucide-react'

interface WidgetContainerProps {
  title: string
  icon?: React.ReactNode
  children: React.ReactNode
  className?: string
  isLoading?: boolean
  error?: string | null
}

export default function WidgetContainer({
  title,
  icon,
  children,
  className = '',
  isLoading,
  error,
}: WidgetContainerProps) {
  return (
    <div
      className={`card flex flex-col overflow-hidden ${className}`}
      style={{ backgroundColor: 'var(--color-bg-surface)' }}
    >
      {/* Header */}
      <div className="flex items-center gap-2 px-4 py-3 border-b border-border-default shrink-0">
        {icon && <span className="text-content-muted">{icon}</span>}
        <h3 className="text-sm font-semibold text-content">{title}</h3>
      </div>

      {/* Body */}
      <div className="flex-1 p-4 overflow-auto">
        {isLoading ? (
          <div className="animate-pulse space-y-2">
            <div className="h-8 rounded bg-surface-muted" />
            <div className="h-8 rounded bg-surface-muted" />
            <div className="h-8 rounded bg-surface-muted" />
          </div>
        ) : error ? (
          <div className="flex items-center gap-2 text-red-500 text-xs">
            <AlertCircle size={14} />
            {error}
          </div>
        ) : (
          children
        )}
      </div>
    </div>
  )
}
