'use client'
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
import { Header } from '@/components/auth/header'
import { Social } from '@/components/auth/social'
import { BackButton } from '@/components/auth/back-button'
import { Suspense } from 'react'
import { Loading } from '@/components/loading'

type Props = {
  children: React.ReactNode
  headerLabel: string
  headerTitle: string
  backButtonLabel: string
  backButtonHref: string
  showSocial?: boolean
  continueWithLabel?: string
}

export const CardWrapper = ({
  children,
  headerLabel,
  headerTitle,
  backButtonLabel,
  backButtonHref,
  showSocial,
  continueWithLabel,
}: Props) => {
  return (
    <Suspense fallback={<Loading/>}>
      <Card
        className="border-8 border-muted shadow-2xl max-w-[430px] w-full sm:min-w-[430px]">
        <CardHeader>
          <Header label={headerLabel} title={headerTitle}/>
        </CardHeader>
        <CardContent>
          {children}
        </CardContent>
        {showSocial && <CardFooter className="flex-wrap">
          <div className="relative flex-none w-[100%] mb-4" style={{ background: 'block' }}>
            <div className="absolute inset-0 flex items-center">
              <span className="w-full border-t"></span>
            </div>
            <div className="relative flex justify-center text-xs uppercase">
            <span
              className="bg-background px-2 text-muted-foreground">{continueWithLabel}</span>
            </div>
          </div>
          <Social/>
        </CardFooter>}
        <CardFooter>
          <BackButton label={backButtonLabel} href={backButtonHref}/>
        </CardFooter>
      </Card>
    </Suspense>
  )
}