'use client'
import { cn } from '@langgenius/dify-ui/cn'
import { useSuspenseQuery } from '@tanstack/react-query'
import Header from '@/app/signin/_header'
import { systemFeaturesQueryOptions } from '@/features/system-features/client'

export default function SignupLayout({ children }: { children: React.ReactNode }) {
  const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())

  return (
    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
      <div
        className={cn(
          'flex w-full shrink-0 flex-col items-center rounded-2xl border border-effects-highlight bg-background-default-subtle',
        )}
      >
        <Header />
        <div className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-27')}>
          <div className="flex flex-col md:w-100">{children}</div>
        </div>
        {systemFeatures.branding.enabled === false && (
          <div className="px-8 py-6 system-xs-regular text-text-tertiary">
            © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
          </div>
        )}
      </div>
    </div>
  )
}