import Image from "next/image";
import React from "react";
import logo from "@/assets/icons/logo-icon.svg";
import bg from "@/assets/icons/register-bg.svg";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import Link from "next/link";
import googleIcon from "@/assets/icons/google.svg";
import facebookIcon from "@/assets/icons/facebook.svg";
import twitterIcon from "@/assets/icons/twitter.svg";
import RegisterForm from "@/components/app/auth/register/form";

const Page = () => {
  return (
    <div className="min-h-screen flex items-center bg-gradient-to-br from-primary to-gray-700">
      <div className="md:flex container gap-10 w-full items-center">
        <div className="md:basis-1/2">
          <Image
            src={logo}
            alt=""
            className="mx-auto max-h-80 w-1/2"
            width={400}
            height={400}
          />
        </div>
        <div className="xl:p-10 p-5 md:basis-1/2 flex justify-start relative">
          <Card className="p-5 shadow z-10">
            <CardContent >
              <RegisterForm />
            </CardContent>
          </Card>
          <Image
            src={bg}
            alt=""
            className="hidden md:block absolute left-32 align-middle"
            width={400}
            height={400}
          />
        </div>
      </div>
    </div>
  );
};

export default Page;