<template>
    <div class="SectionTitle">
        <div class="TitleFa Fa Bold  WM-Align-R" :class="TextFaColor" v-text="TitleFa"></div>
        <div class="TitleEn En WM-Flex">
            <span :class="[color,TextColor]" v-text="TitleEn"></span>
            <div class="Line">
                <div class="inner" :class="color"></div>
            </div>
        </div>
        <we-hint-text v-if="hintDesc != ''"
            class="mt-1"
            :icon="hintIcon"
            :theme="hintClass"
            :title="hintTitle"
            :text="hintDesc"
            text-color="black">
        </we-hint-text>
    </div>
</template>

<script>
export default {
    name: "wm-part-title",
    props: {
        TitleFa: { default: "عنوان بخش" },
        TitleEn: { default: "Part Title" },
        color: { default: "black" },
        TextColor: { default: "white--text" },
        TextFaColor: { default: "black--text" },
        hintClass: { default: "grey lighten-3 inline XS" },
        hintTitle: { default: "" },
        hintDesc: { default: "" },
        hintIcon: { default: "info" }
    },
    data: function ()  {
        return {}
    },
};
</script>
<style lang="scss" scoped>
/* --------------------------------------------------------
                        SectionTitle :: Begin
-------------------------------------------------------- */
.SectionTitle {
    width: 100%;
}
.SectionTitle .TitleFa {
    font-size: 1.4rem;
}

.SectionTitle .TitleEn {
    span {
        color: #fff;
        padding: 2px 20px 2px 25px;
        border-radius: 0.2em;
        letter-spacing: 0.5em;
        line-height: 18px;
        font-size: 12px;
        text-transform: uppercase;
    }
    .Line {
        flex-grow: 1;
        position: relative;
        .inner {
            position: absolute;
            top: 50%;
            width: calc(100% - 1em);
            left: 0;
            height: 1px;
        }
    }
}

</style>

