import React from 'react'

type ContentBlockVariant = 'green' | 'gray' | 'blue' | 'purple' | 'yellow' | 'red' | 'orange'

interface ContentBlockProps {
  title: string
  variant: ContentBlockVariant
  children: React.ReactNode
  className?: string
  titleActions?: React.ReactNode
}

const variantStyles: Record<ContentBlockVariant, { bg: string, border: string, title: string }> = {
  green: {
    bg: 'bg-green-50',
    border: 'border-green-200',
    title: 'text-green-900'
  },
  gray: {
    bg: 'bg-gray-50',
    border: 'border-gray-200',
    title: 'text-gray-900'
  },
  blue: {
    bg: 'bg-blue-50',
    border: 'border-blue-200',
    title: 'text-blue-900'
  },
  purple: {
    bg: 'bg-purple-50',
    border: 'border-purple-200',
    title: 'text-purple-900'
  },
  yellow: {
    bg: 'bg-yellow-50',
    border: 'border-yellow-200',
    title: 'text-yellow-900'
  },
  red: {
    bg: 'bg-red-50',
    border: 'border-red-200',
    title: 'text-red-900'
  },
  orange: {
    bg: 'bg-orange-50',
    border: 'border-orange-200',
    title: 'text-orange-900'
  }
}

export const ContentBlock: React.FC<ContentBlockProps> = ({
  title,
  variant,
  children,
  className = '',
  titleActions
}) => {
  const styles = variantStyles[variant]

  return (
    <div className={`${styles.bg} rounded-lg p-4 border ${styles.border} ${className}`}>
      <div className="flex justify-between items-center mb-3">
        <h3 className={`font-semibold ${styles.title} text-left`}>
          {title}
        </h3>
        {titleActions && (
          <div className="flex items-center gap-2">
            {titleActions}
          </div>
        )}
      </div>
      {children}
    </div>
  )
}