/*
 * Copyright 2025 Daytona Platforms Inc.
 * SPDX-License-Identifier: AGPL-3.0
 */

import { ScrollArea } from '@/components/ui/scroll-area'
import { cn } from '@/lib/utils'

function PlaygroundLayout({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={cn('grid grid-cols-1 lg:grid-cols-[minmax(320px,400px)_1fr] h-full', className)}>{children}</div>
  )
}

function PlaygroundLayoutSidebar({ children }: { children: React.ReactNode }) {
  return (
    <ScrollArea fade="mask" className="bg-sidebar/20 border-r border-border hidden lg:flex h-full overflow-hidden">
      <div className="p-4">{children}</div>
    </ScrollArea>
  )
}

function PlaygroundLayoutContent({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <div
      className={cn(
        'overflow-auto bg-[radial-gradient(hsl(var(--border))_1px,transparent_1px)] [background-size:12px_12px] flex items-center justify-center p-5',
        className,
      )}
    >
      {children}
    </div>
  )
}

export { PlaygroundLayout, PlaygroundLayoutContent, PlaygroundLayoutSidebar }
