import { MdEdit } from "react-icons/md";
import Button from "../../../components/button";
import ModalEditProfile from "./components/ModalEditProfile";
import { useState } from "react";

const ProfileDetails = () => {
  return (
    <div className="relative z-[10] w-full h-32 max-md:h-20 flex flex-row-reverse justify-between glass items-center py-2 px-4">
      <EditProfile />
      <ProductDetails />
    </div>
  );
};

export default ProfileDetails;

const EditProfile = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div className="w-full h-full flex justify-end items-center">
      <ModalEditProfile isOpen={isOpen} setIsOpen={setIsOpen} />
      <Button
        extra="!py-4 max-md:!py-2 max-md:px-2"
        onClick={() => setIsOpen(true)}
      >
        <MdEdit className="scale-[1.4] max-md:scale-100" />
      </Button>
    </div>
  );
};

const ProductDetails = () => {
  return (
    <div className="w-full h-full flex justify-start items-center">
      <div className="md:mr-4 w-auto h-auto flex flex-col max-md:text-[12px] text-lg md:gap-2">
        <p className="text-nowrap">
          کانفیگ های فعال :{" "}
          <span className="px-1 md:px-2 rounded-md bg-green-600"> 2 </span>
        </p>
        <p className="text-nowrap">
          کانفیگ های غیر فعال :{" "}
          <span className="px-1 md:px-2 rounded-md bg-yellow-400"> 10 </span>
        </p>
      </div>
    </div>
  );
};