'use client'

import { ReactNode } from 'react'

interface DashboardLayoutProps {
  title: string | ReactNode
  subtitle?: string
  children: ReactNode
  actions?: ReactNode
}

export default function DashboardLayout({ 
  title, 
  subtitle, 
  children, 
  actions
}: DashboardLayoutProps) {
  return (
    <div className="p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto">
      {/* Header */}
      <div className="mb-8 lg:mb-12">
        <div className="flex flex-col space-y-4 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
          <div className="min-w-0 flex-1">
            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-black text-white mb-2 lg:mb-3 tracking-tight leading-tight">
              {title}
            </h1>
            {subtitle && (
              <p className="text-base sm:text-lg text-gray-400 font-medium">
                {subtitle}
              </p>
            )}
          </div>
          {actions && (
            <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
              {actions}
            </div>
          )}
        </div>
      </div>

      {/* Content */}
      <div className="space-y-6">
        {children}
      </div>
    </div>
  )
}