File: src/components/capsule/NoCapsule.tsx

/**
 * External dependencies.
 */
import {__} from "@wordpress/i18n";

/**
 * Internal dependencies.
 */
import {INoCapsule} from "../../interfaces";

export default function NoCapsule({length, onResetFilter, filterResetButtonStyle}: INoCapsule) {
    return (
        <div className="bsf-spacex-no-capsule">
            {
                length === 0 &&
                <div>
                    <div className="capsule-svg-image">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="100" width="100"
                             viewBox="0 0 64 64">
                            <path
                                d="M64 8.899c0-2.785-.794-4.989-2.359-6.55-6.284-6.261-22.807.397-37.621 15.161-.538.537-1.03 1.109-1.503 1.695a3.47 3.47 0 0 0-.539-.169C17.71 18.039 4.017 20.365.03 36.291a1 1 0 0 0 .41 1.071.99.99 0 0 0 .56.172 1 1 0 0 0 .587-.19c5.411-3.925 9.751-5.503 13.54-4.922a30.44 30.44 0 0 1-.801 1.378 1 1 0 0 0 .144 1.235l1.569 1.564-2.937 2.926a1 1 0 0 0 0 1.416l9.829 9.797a1 1 0 0 0 1.412 0l2.941-2.932 1.573 1.568a1 1 0 0 0 1.231.144 30.76 30.76 0 0 1 1.284-.746c.651 3.808-.926 8.176-4.914 13.638a1 1 0 0 0 .808 1.59 1.02 1.02 0 0 0 .241-.029c15.94-3.964 18.296-17.609 17.313-21.865a3.14 3.14 0 0 0-.224-.646 21.16 21.16 0 0 0 1.833-1.604C57.103 29.219 64 17.066 64 8.899zm-47.942 21.65c-3.901-.822-8.188.321-13.279 3.562 2.504-6.948 7.064-10.231 10.643-11.776 2.683-1.158 5.124-1.482 6.686-1.482a8.37 8.37 0 0 1 1.054.06l-5.104 9.637zm7.579 18.069l-8.412-8.385 2.23-2.222 7.267 7.242 1.145 1.14-2.23 2.224zm17.896 1.955c-1.547 3.583-4.842 8.148-11.837 10.651 3.246-5.069 4.394-9.339 3.57-13.229l9.674-5.09c.174 1.314.047 4.299-1.407 7.668zm-6.844-5.708c-1.759.847-3.434 1.651-4.971 2.544L16.436 34.172c.717-1.228 1.38-2.562 2.052-3.94l4.061-7.667c.85-1.316 1.792-2.551 2.882-3.638C38.984 5.419 54.917-1.524 60.228 3.765 61.404 4.937 62 6.665 62 8.899c0 7.545-6.825 19.417-16.982 29.541-2.829 2.819-6.642 4.652-10.328 6.425zm8.036-32.012a5.95 5.95 0 0 0-1.768 4.248c0 1.606.628 3.115 1.768 4.249 1.175 1.169 2.718 1.754 4.261 1.754a6.02 6.02 0 0 0 4.26-1.754 5.95 5.95 0 0 0 1.767-4.249 5.95 5.95 0 0 0-1.767-4.248c-2.348-2.338-6.171-2.338-8.521 0zm7.11 7.079a4.05 4.05 0 0 1-5.7 0 3.97 3.97 0 0 1 0-5.661 4.03 4.03 0 0 1 5.701 0 3.97 3.97 0 0 1 1.177 2.83 3.97 3.97 0 0 1-1.177 2.831zm-33.37 27.215a1 1 0 0 0-1.414-.002l-9.995 9.962a1 1 0 0 0-.002 1.414c.195.196.451.294.708.294a1 1 0 0 0 .706-.292l9.995-9.962a1 1 0 0 0 .002-1.414zm-10.74 4.826a1 1 0 0 0 .706-.292l6.582-6.561a1 1 0 0 0-1.412-1.416l-6.582 6.561a1 1 0 0 0-.002 1.414c.195.196.451.294.708.294zm12.777-1.389l-6.582 6.561a1 1 0 0 0-.002 1.414c.195.196.451.294.708.294a1 1 0 0 0 .706-.292L19.914 52a1 1 0 0 0-1.412-1.416z"/>
                        </svg>
                    </div>

                    <h3>{__('No capsules found !', 'bsf-spacex')}</h3>
                    <p>{__('Please search again or,', 'bsf-spacex')}</p>

                    <button className='filter-reset-button' onClick={onResetFilter} style={filterResetButtonStyle}>
                        {__('Reset Filter', 'bsf-spacex')}
                    </button>
                </div>
            }
        </div>
    )
}