import  { useState } from 'react';
import "../addproperty.css";


const Addproperty = () => {
  const [activeTab, setActiveTab] = useState('billing');

  const handleContinue = () => {
    if (activeTab === 'billing') setActiveTab('shipping');
    else if (activeTab === 'shipping') setActiveTab('review');
  };

  const handleBack = () => {
    if (activeTab === 'review') setActiveTab('shipping');
    else if (activeTab === 'shipping') setActiveTab('billing');
  };

  return (
    <div className="container tabs-wrap">
      <ul className="nav nav-tabs" role="tablist">
        <li role="presentation" className={activeTab === 'billing' ? 'active tab' : 'tab'}>
          <a onClick={() => setActiveTab('billing')} role="tab">Billing Address</a>
        </li>
        <li role="presentation" className={activeTab === 'shipping' ? 'active tab' : 'tab'}>
          <a onClick={() => setActiveTab('shipping')} role="tab">Delivery Address</a>
        </li>
        <li role="presentation" className={activeTab === 'review' ? 'active tab' : 'tab'}>
          <a onClick={() => setActiveTab('review')} role="tab">Review &amp; Payment</a>
        </li>
      </ul>

      <div className="tab-content">
        {activeTab === 'billing' && (
          <div role="tabpanel" className="tab-pane active">
            <h3>Billing Address</h3>
            <p>Billing Address Form</p>
            <button className="btn btn-primary continue" onClick={handleContinue}>Continue</button>
          </div>
        )}
        {activeTab === 'shipping' && (
          <div role="tabpanel" className="tab-pane active">
            <h3>Shipping Address</h3>
            <p>Shipping Address Form</p>
            <button className="btn btn-primary back" onClick={handleBack}>Go Back </button>{" "}
            <button className="btn btn-primary continue" onClick={handleContinue}>Continue</button>
          </div>
        )}
        {activeTab === 'review' && (
          <div role="tabpanel" className="tab-pane active">
            <h3>Review &amp; Place Order</h3>
            <p>Review &amp; Payment Tab</p>
            <button className="btn btn-primary back" onClick={handleBack}>Go Back</button>{" "}
            <button className="btn btn-primary continue">Place Order</button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Addproperty;
