import React from 'react';
import { Link } from '../../../../../../navigation';
import { CustomSelect } from '../../../../../../components/view/CustomSelect';

export default function AddOffer() {
    return (
        <>
            <ol className="breadcrumb">
                <li className="breadcrumb-item">
                    <Link href={'/account/expert-profile' as any}>
                        Work With Us
                    </Link>
                </li>
                <li className="breadcrumb-item">
                    <Link href={'/account/expert-profile/coaching' as any}>
                        Coaching
                    </Link>
                </li>
                <li className="breadcrumb-item active" aria-current="page">Add Offer</li>
            </ol>

            <h2 className="title-h2">Select Topic</h2>
            <form className="form-offer" action="">
                <div className="form-field ">
                    <input type="text" placeholder="Search" className="base-input" id="" value="" />
                </div>
                <h3 className="title-h3">Life coaching</h3>
                <div className="b-filter">
                    <div className="b-filter__inner">
                        <div className="b-filter__item">
                            <div className="b-filter__title">Work-life Balance</div>
                            <label className="base-switcher">
                                <input className="base-switcher__input" type="checkbox" />
                                <span className="base-switcher__line" />
                                <span className="base-switcher__circle" />
                            </label>
                        </div>
                        <div className="b-filter__item">
                            <div className="b-filter__title">Strategic Session</div>
                            <label className="base-switcher">
                                <input className="base-switcher__input" type="checkbox" />
                                <span className="base-switcher__line" />
                                <span className="base-switcher__circle" />
                            </label>
                        </div>
                        <div className="b-filter__item">
                            <div className="b-filter__title">Personal Growth
                            </div>
                            <label className="base-switcher">
                                <input className="base-switcher__input" type="checkbox" />
                                <span className="base-switcher__line" />
                                <span className="base-switcher__circle" />
                            </label>
                        </div>
                        <div className="b-filter__item">
                            <div className="b-filter__title">Executive Coaching</div>
                            <label className="base-switcher">
                                <input className="base-switcher__input" type="checkbox" />
                                <span className="base-switcher__line" />
                                <span className="base-switcher__circle" />
                            </label>
                        </div>
                        <div className="b-filter__item">
                            <div className="b-filter__title">Career Planning</div>
                            <label className="base-switcher">
                                <input className="base-switcher__input" type="checkbox" />
                                <span className="base-switcher__line" />
                                <span className="base-switcher__circle" />
                            </label>
                        </div>
                    </div>
                </div>
                <h3 className="title-h3">Business coaching</h3>
                <h2 className="title-h2">Offer Details</h2>
                <div className="form-field">
                    <CustomSelect label="Session Language" />
                </div>
                <div className="form-field">
                    <input type="text" placeholder="Title" className="base-input" id="" value="" />
                </div>
                <div className="form-field">
                    <textarea className="base-textarea" name="" id="" placeholder="Description" />
                </div>
                <div className="form-field">
                    <CustomSelect label="Session Duration" />
                </div>
                <div className="form-field">
                    <input className="base-input " type="text" placeholder="Session cost in euro" id="" value="" />
                </div>
                <button className="btn-apply">Save</button>
            </form>
        </>
    );
}