Creating a generic Modal

<template>
    <section role="dialog" tabindex="-1" class={modalClass} aria-labelledby="modal-heading-01" aria-modal="true">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <slot name="headercontent">Default content</slot>
            </div>
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <slot name="bodycontent">Default content</slot>
            </div>
            <div class="slds-modal__footer">
                <slot name="footercontent">Default content</slot>
            </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
</template>

import { LightningElement, api } from 'lwc';

export default class Modal extends LightningElement {
    //default size of the modal has been kept as large 
    //other possible values are medium and small
    @api modalClass = "slds-modal slds-fade-in-open slds-modal_large";
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

<template>
    <lightning-button label="open modal" onclick={handleOpenModal}></lightning-button>
    <c-modal if:true={openModal} modal-class="slds-modal slds-fade-in-open slds-modal_medium">
        <span slot="headercontent">
            <lightning-button-icon class="slds-modal__close" title="Close" icon-name="utility:close"
                icon-class="slds-button_icon-inverse" onclick={handleCloseModal}>
            </lightning-button-icon>
            Header Name
        </span>
        <span slot="bodycontent">
            Body Content
        </span>
        <span slot="footercontent">
            <button class="slds-button slds-button_neutral" onclick={handleCloseModal} title="Cancel">Cancel</button>
        </span>
    </c-modal>
</template>

import { LightningElement } from 'lwc';

export default class TestModal extends LightningElement {
    openModal = false;
    handleOpenModal() {
        this.openModal = true;
    }
    handleCloseModal() {
        this.openModal = false;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>