import { SignUpForm } from "@/components/common/sign-up-from";
import { AuthLayout } from "@/components/layout/auth-layout";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { ApiClient } from "@/services";
import Link from "next/link";

export function SignUpPage({ api }: { api: ApiClient }) {
  return (
    <Card className='gap-4'>
      <CardHeader>
        <CardTitle className='text-lg tracking-tight'>
          Create an account
        </CardTitle>
        <CardDescription>
          Enter your email and password to create an account. <br />
          Already have an account?{' '}
          <Link
            href='/auth/login'
            className='hover:text-primary underline underline-offset-4'
          >
            Sign In
          </Link>
        </CardDescription>
      </CardHeader>
      <CardContent>
        <SignUpForm api={api} />       </CardContent>
      <CardFooter>
        <p className='text-muted-foreground px-8 text-center text-sm'>
          By creating an account, you agree to our{' '}
          <a
            href='/terms'
            className='hover:text-primary underline underline-offset-4'
          >
            Terms of Service
          </a>{' '}
          and{' '}
          <a
            href='/privacy'
            className='hover:text-primary underline underline-offset-4'
          >
            Privacy Policy
          </a>
          .
        </p>
      </CardFooter>
    </Card>
  )
}
