import {ReactNode} from 'react'

import AuthHeader from './auth-header'
import {BackButton} from './back-button'
import {Card, CardContent, CardFooter, CardHeader} from '@/components/ui/card'

interface CardWrapperProps {
	children: ReactNode
	headerLabel: string
	backButtonLabel: string
	title: string
	showSocial?: boolean
	backButtonHref: string
}

const CardWrapper = ({
	children,
	headerLabel,
	backButtonLabel,
	backButtonHref,
	title,
	showSocial
}: CardWrapperProps) => {
	return (
		<Card className='m-auto shadow-md md:w-1/2 xl:w-1/4'>
			<CardHeader>
				<AuthHeader label={headerLabel} title={title} />
			</CardHeader>
			<CardContent>{children}</CardContent>
			<CardFooter>
				<BackButton label={backButtonLabel} href={backButtonHref} />
			</CardFooter>
		</Card>
	)
}

export default CardWrapper