<template>
    <div
        class="flex flex-1 text-center justify-center items-center md:items-start md:justify-start gap-2.5 w-full flex-wrap py-5 flex-col md:flex-row"
    >
        <div class="rounded-full">
            <img
                class="object-cover aspect-square w-[65px] h-[65px] rounded-full overflow-hidden no-magnify"
                :src="proposal.proposalable.user.profile_photo_url"
                alt="profile image"
            />
        </div>
        <div
            class="flex flex-1 h-full justify-center md:items-start items-center flex-col gap-1.5"
        >
            <p class="text-xs text-gray-200">
                {{ moment(proposal.created_at).format("MM/DD/YYYY hh:mm A") }}
            </p>
            <Link
                :href="
                    route(
                        proposal.proposalable_type == 'App\\Models\\Engineer'
                            ? 'engineer.profile.slugged'
                            : 'firm.profile.slugged',
                        proposal.proposalable.slug
                    )
                "
                class="font-medium text-blue-300"
            >
                {{ proposal.proposalable.name }}
            </Link>
            <p
                v-if="proposal.proposalable.tag_line"
                class="text-sm text-gray-200 overflow-ellipsis"
            >
                {{ proposal.proposalable.tag_line }}
            </p>
            <p
                class="flex gap-1 text-xs font-medium leading-4 text-gray-200 cont_spans normal font-Inter"
            >
                <svg
                    width="14"
                    height="14"
                    viewBox="0 0 14 14"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M7.00015 10.8543L3.39982 12.7472L4.08757 8.73797L1.1709 5.89889L5.1959 5.31555L6.99606 1.66797L8.79623 5.31555L12.8212 5.89889L9.90456 8.73797L10.5923 12.7472L7.00015 10.8543Z"
                        stroke="#FA8C16"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                </svg>
                {{ proposal.proposalable.averageRating }}
            </p>
        </div>
        <div>
            <Button
                type="link"
                :href="
                    worker
                        ? route('engineer.proposals.show', proposal.id)
                        : route('client.projects.proposals.show', proposal.id)
                "
                buttonStyle="outline-blue"
                size="md"
                >{{ $t("Register.view_details") }}
            </Button>
        </div>
    </div>
</template>

<script>
import Button from "@/Jetstream/Button";
import { Link } from "@inertiajs/inertia-vue3";
export default {
    props: {
        proposal: Object,
        worker: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        Button,
        Link,
    },
};
</script>
