import React from "react";
import AddressCard from "./AddressCard";
import { Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { useState } from "react";
import AddressAdd from "./AddressAdd";
/**
 * Address component displays the user's address information and provides an option to add a new address.
 *
 * @param {Object} user - The user object containing address information.
 * @returns {JSX.Element} - React component representing the user's address.
 */
const Address = ({ user }) => {
  const [showAddForm, setShowAddForm] = useState(false);

  /**
   * Toggle the visibility of the add address form.
   */
  const ToggleAddForm = () => {
    setShowAddForm((prev) => !prev);
  };

  const buttonStyle = {
    backgroundColor: "blue",
    color: "white",
    borderRadius: "4px",
    padding: "8px 16px",
    border: "none",
    cursor: "pointer",
  };

  const containerStyle = {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start",
    marginBottom: "16px",
  };

  const cardStyle = {
    border: "1px solid #ccc",
    borderRadius: "4px",
    padding: "16px",
  };

  return (
    <>
      <div>
        {!showAddForm && (
          <>
            <div style={{paddingBottom: '100px;'}}>
            <Button onClick={ToggleAddForm} icon={<PlusOutlined />}>
              Add address
            </Button>
            <div className="shareholder_details_div mt-3">
              <AddressCard user={user} />
            </div>
            </div>
          </>
        )}
      </div>
      <div>{showAddForm && <AddressAdd ToggleAddForm={ToggleAddForm} />}</div>
    </>
  );
};

export default Address;