import { type FC } from "react";

import { Card, CardContent } from "@/components/ui/card";
import { ArrowLeftRight, User } from "lucide-react";
import { Button } from "@/components/ui/button";

const AgreementPage: FC = () => {
  return (
    <div
      className={`relative min-h-screen bg-cover bg-center bg-white dark:bg-black bg-[url(/overlay.jpg)] dark:bg-[url(dark-overlay.jpg)]`}
    >
      <div className="relative z-10 flex items-center justify-center min-h-screen">
        <Card className="sm:w-[425px] sm:min-w-[425px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/65 dark:bg-black/65 backdrop-blur-md">
          <div className="flex flex-col items-center pt-10 sm:pt-0">
            <div className="flex flex-col items-center flex-5/6">
              {/* <img
                src="/icon.png"
                alt="icon"
                className="w-16 h-16 mb-4 mt-2 sm:mt-6"
              /> */}
              <div className="flex flex-row items-center gap-4 mt-2 mb-4 sm:mt-6">
                <div className="p-2 bg-gray-100 rounded-full ring ring-gray-900 dark:ring dark:ring-gray-100">
                  <User size={32} />
                </div>
                <div className="text-gray-400 dark:text-gray-600">
                  {/* <Activity /> */}
                  <ArrowLeftRight />
                </div>
                <div className="p-2 rounded-full bg-gray-900 ring ring-gray-900 dark:ring dark:ring-gray-100">
                  {/* <img
                    src="https://lucide.dev/logo.dark.svg"
                    className="w-8 h-8"
                  /> */}
                  <img
                    src="https://developer.mozilla.org/favicon.svg"
                    className="w-8 h-8"
                  />
                </div>
              </div>

              <div className="px-4 sm:mt-4 mt-8">
                <h2 className="text-2xl font-medium text-gray-800 dark:text-gray-300 text-center w-full mb-2">
                  <a href="#" className="text-blue-500">
                    MDN Lab Services
                  </a>{" "}
                  wants to access your Home Account
                </h2>
                <div className="flex flex-row items-center justify-center mb-6 gap-2">
                  <div className="p-2 bg-gray-100 rounded-full ring ring-gray-900 dark:ring dark:ring-gray-100">
                    <User />
                  </div>
                  <p className="text-sm text-gray-500 dark:text-gray-500">
                    qwer.009771@gmail.com
                  </p>
                </div>
                <h4 className="text-base mb-3 text-gray-400 dark:text-gray-500 text-left">
                  This will allow{" "}
                  <a href="#" className="text-blue-500">
                    MDN Lab Services
                  </a>{" "}
                  to:
                </h4>
              </div>
            </div>

            {/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
            <CardContent className="w-full space-y-4 text-sm">
              <div className="flex flex-col gap-3 mb-8">
                <div className="flex flex-row items-center justify-between text-gray-600 dark:text-gray-400">
                  <div className="flex flex-row items-center gap-4">
                    <div className="w-3 h-3 rounded-full bg-blue-500"></div>
                    <p>View your full name, email and profile image</p>
                  </div>
                </div>
                <div className="flex flex-row items-center justify-between text-gray-600 dark:text-gray-400">
                  <div className="flex flex-row items-center gap-4">
                    <div className="w-3 h-3 rounded-full bg-blue-500"></div>
                    <p>View your permission from "MDN" group</p>
                  </div>
                </div>
              </div>

              <div className="mb-10">
                <p className="font-medium mb-4 dark:text-gray-200">
                  Are you sure you want to trust MDN Lab Services?
                </p>
                <p className="text-sm text-gray-400 dark:text-gray-500">
                  Please do not share any sensitive, personal, or unnecessary
                  information unless you trust this service. Protect your
                  privacy and only provide information that is required for the
                  intended purpose.
                </p>
              </div>

              <div className="flex flex-row justify-between items-center">
                <Button variant="text">Cancel</Button>

                <Button>Allow</Button>
              </div>
            </CardContent>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default AgreementPage;