<template>
    <div class="row m-b-15 parentContainer">
        <div class="col">
            <div class="row align-items-center">
                <div class="col">
                    <div class="row">
                        <div class="col-auto p-r-10">
                            <div class="font-heading all-caps fs-8 muted">Name</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-10">{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row align-items-center">
                <div class="col">
                    <div class="row">
                        <div class="col-auto p-r-10">
                            <div class="font-heading all-caps fs-8 muted">Description</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-10">{{item.description}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row align-items-center">
                <div class="col">
                    <div class="row">
                        <div class="col-auto p-r-10">
                            <div class="font-heading all-caps fs-8 muted">Number of rewards</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="font-heading all-caps fs-10">{{item.reward_ids.length}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-auto parentContainer">
            <div class="row align-items-center">
                <div class="col-auto no-padding">
                    <button class="btn btn-xs btn-primary b-rad-none requestModal" data-type="createModal">
                        <i class="fa fa-plus m-r-5"></i>
                        Edit
                    </button>
                    <button class="btn btn-xs btn-outline-danger b-rad-none m-r-5 requestModal" data-type="deleteMilestone">
                        <i class="fa fa-times"></i>
                    </button>
                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteMilestone">
                        <delete-milestone-form-component :data="item" :section="section" class="text-center"></delete-milestone-form-component>
                    </modal-component>
                </div>
            </div>
            <modal-form-component size="large" section="milestoneSection">
                <template #form="{ section }">
                    <add-milestone-form-component :data="data" section="editMilestoneSection" :options-milestone-name="optionsMilestoneName" ></add-milestone-form-component>
                </template>
            </modal-form-component>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useComponentHandler } from '@/composables/useComponentHandler';

interface Props {
    data: any;
    section?: string;
    optionsMilestoneName: any[];
}

const props = withDefaults(defineProps<Props>(), {
    section: 'milestoneSection'
});

const { item } = useComponentHandler(props);
</script>
