'use client'

import React from 'react'

interface ChartCardProps {
  title: string
  subtitle?: string
  children: React.ReactNode
  className?: string
}

const ChartCard: React.FC<ChartCardProps> = ({ 
  title, 
  subtitle, 
  children, 
  className = '' 
}) => {
  const interSemiboldStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 600 }
  const interRegularStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 400 }

  return (
    <div className={`bg-[#161824] rounded-[20px] p-6 ${className}`}>
      <div className="flex items-start justify-between mb-6">
        <div>
          <h3 style={interSemiboldStyle} className="text-white text-sm mb-1">{title}</h3>
          {subtitle && (
            <p style={interRegularStyle} className="text-[#71717a] text-xs">{subtitle}</p>
          )}
        </div>
        <div className="w-4 h-4">
          <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
        </div>
      </div>
      
      <div className="h-[200px]">
        {children}
      </div>
    </div>
  )
}

export default ChartCard