import Avatar from "@/feature/Avatar";
import { ChevronRight } from "lucide-react";
import { type FC } from "react";

const PersonalInfo: FC = () => {
  return (
    <>
      <h1 className="dark:text-gray-200 text-gray-800 text-2xl">
        Your profile info in Home services
      </h1>

      <p className="text-gray-500 text-sm mt-2 sm:text-lg">
        Personal info and options to manage it. You can make some of this info,
        like your contact details, visible to others so they can reach you
        easily. You can also see a summary of your profiles.
      </p>

      <div className="border dark:border-gray-800 border-gray-300 p-4 rounded mt-4">
        <h3 className="dark:text-gray-300 text-gray-800">Basic info</h3>
        <p className="text-gray-500 text-sm mt-2 mb-4">
          Some info may be visible to other services and tools using Home Guard.{" "}
          <a href="#" className="text-blue-500">
            Learn more
          </a>
        </p>

        {/* Profile Picture */}
        <div className="flex flex-row items-center justify-between px-2 p-4 border-b gap-2 dark:border-b-gray-800 border-b-gray-100">
          <div className="flex flex-col items-start gap-2">
            <p className="text-sm dark:text-gray-400 font-medium text-gray-600">
              Profile picture
            </p>
            <p className="text-sm dark:text-gray-500 text-gray-600">
              Add a profile picture to personalize your account
            </p>
          </div>
          <div>
            <div className="w-16 h-16 overflow-hidden rounded-full dark:bg-gray-400 bg-gray-700">
              <Avatar iconSize={12} />
            </div>
          </div>
        </div>

        {/* Name */}
        <div className="flex flex-row items-center justify-between px-2 p-4 border-b dark:border-b-gray-800 border-b-gray-100">
          <div className="flex flex-col items-start gap-2">
            <p className="text-sm dark:text-gray-400 font-medium text-gray-600">
              Name
            </p>
            <p className="text dark:text-gray-200 text-gray-800">Amir Adal</p>
          </div>
          <div>
            <div className="text-gray-500">
              <ChevronRight size={26} />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default PersonalInfo;