<template>
    <div class="bg-white mb-[10px] max-w-[1140px] m-auto p-[20px] rounded-2xl">
        <div class="max-w-[1100px] rounded-[8px]">
            <h1
                class="max-w-[150px] mb-[10px] h-[15px] font-inter font-medium leading-[14.5px] text-[12px]"
            >
                <span
                    class="text-gray-200 font-inter font-normal leading-[14.5px] text-[12px]"
                >
                    Project ID: </span
                >MH {{ project.slug }}
            </h1>

            <h1
                class="mb-[10px] h-[15px] font-inter font-normal leading-[14.5px] text-[12px]"
            >
                open
            </h1>

            <h1
                class="font-inter font-normal text-gray-200 mb-[5px] leading-[14.5px] text-[12px]"
            >
                Project title:
            </h1>
            <h1
                class="mb-[10px] h-[15px] font-inter font-medium leading-[14.5px] text-[14px]"
            >
                {{ project.title }}
            </h1>
            <h1
                class="font-inter font-normal text-gray-200 mb-[5px] leading-[14.5px] text-[12px]"
            >
                Project description:
            </h1>
            <h1
                class="font-inter font-medium mb-[10px] leading-[14.5px] text-[12px]"
            >
                {{ project.description }}
            </h1>

            <h1
                class="font-inter font-normal text-gray-200 mb-[5px] leading-[14.5px] text-[12px]"
            >
                Proejct specialties:
            </h1>
        </div>

        <div class="flex flex-wrap gap-2 max-w-[700px]">
            <Badge v-for="item in project.skills" :key="item.id" size="fits">
                {{ item.name_ar }}
            </Badge>
        </div>
        <hr class="w-full mt-[20px]" />
        <div class="max-w-full mt-[5px] mb-[20px]" title="descraption"></div>
        <div class="flex justify-between">
            <div class="flex gap-[10px]">
                <div class="mr-[30px]">
                    <h1
                        class="text-[12px] font-medium leading-[14.52px] text-gray-200 normal font-Inter"
                    >
                        <!-- {{ proposal.proposalable.name }} -->Project
                        Duration:
                    </h1>
                    <h1
                        class="text-[14px] font-medium mt-[10px] leading-[16.94px] normal font-Inter"
                    >
                        3 Month
                    </h1>
                </div>
                <div>
                    <h1
                        class="text-[12px] font-medium leading-[14.52px] text-gray-200 normal font-Inter"
                    >
                        {{ $t("Register.project_price") }}
                    </h1>
                    <h1
                        class="text-[14px] font-medium mt-[10px] leading-[16.94px] normal font-Inter"
                    >
                        Bidding: Starts from {{ activeCurrency() }} 1,000.00
                    </h1>
                </div>
            </div>
            <div class="mt-[15px] mr-[20px]">
                <Button buttonStyle="outline-blue" size="fit_2"
                    >View Details</Button
                >
            </div>
        </div>
    </div>
</template>

<script>
import Badge from "@/components/General/Badge";
import moment from "moment";
import Button from "@/Jetstream/Button";

export default {
    props: ["project"],
    data() {
        return {
            checkstate: false,
        };
    },
    components: {
        Badge,
        Button,
    },
    mounted() {},
    // computed: {
    //     badgeColor() {
    //         if (this.proposal.status == "Completed") {
    //             return "green";
    //         } else if (this.proposal.status == "Pending Approval") {
    //             return "orange";
    //         } else if (this.proposal.status == "Declined") {
    //             return "red";
    //         }
    //     },
    // },
};
</script>
