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

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="max-w-[414px] w-[100%] shadow-md md:min-w-[414px] sm:w-full">
      <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={{ display: '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>

        {/*<Separator className="my-4"/>*/}
        <Social/>
      </CardFooter>}
      <CardFooter>
        <BackButton label={backButtonLabel} href={backButtonHref}/>
      </CardFooter>
    </Card>
  )
}