'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'

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 (
    <Card
      className={`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">
          <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>
  )
}