<template>
    <div class="flex flex-col w-full gap-5 lg:flex-1 lg:max-w-xs">
        <Card>
            <div class="flex flex-col w-full gap-5">
                <div class="flex items-center justify-center w-full">
                    <img
                        class="object-cover aspect-square w-[100px] h-[100px] rounded-full overflow-hidden no-magnify"
                        :src="firm.user.profile_photo_url"
                        alt="profile image"
                    />
                </div>
                <div class="bg-blue-200 p-2.5 flex flex-col gap-5 rounded-lg">
                    <div class="text-sm font-medium text-gray-300">
                        {{ $t("Register.total_purchases") }}
                        <span class="block mt-1 text-green-300">
                            {{ firm.total_purchases || 0 }}
                        </span>
                    </div>

                    <div class="text-sm font-medium text-gray-300">
                        {{ $t("Register.total_recieved") }}

                        <span class="block mt-1 text-green-300">
                            {{ currency(firm.total_recieved || 0) }}
                        </span>
                    </div>
                </div>
                <Button
                    :href="route('firm.services.create')"
                    type="link"
                    size="full-sm"
                >
                    <span
                        class="flex items-center justify-center w-full gap-1 text-center"
                    >
                        {{ $t("Register.create_service") }}
                    </span>
                </Button>
            </div>
        </Card>
    </div>
</template>

<script>
import Card from "@/components/Containers/ContentCard";
import Button from "@/Jetstream/Button";
export default {
    components: {
        Card,
        Button,
    },
    props: {
        firm: {},
    },
};
</script>

<style></style>
