<script setup>
import { Link } from "@inertiajs/inertia-vue3";

defineProps({
    type: {
        type: String,
        default: "button",
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    size: {
        type: String,
        default: "default",
    },
    href: {
        type: String,
        default: null,
    },
    buttonStyle: {
        type: String,
        default: "default",
    },
    loading: {
        type: Boolean,
        default: false,
    },
});

const sizes = {
    xs: "p-1.5 rounded-lg font-semibold text-xs",
    sm: "px-4 py-1.5 rounded-lg font-semibold text-xs",
    default: "px-10 py-2 rounded-lg font-semibold text-xs tracking-widest",
    md: "px-10 py-2 rounded-lg font-medium text-sm",
    lg: "px-10 py-2 rounded-lg font-medium text-lg",
    "sq-rounded-default":
        "w-8 h-8 rounded-full flex items-center justify-center",
    "full-sm": "w-full px-4 py-2 rounded-lg font-medium text-sm",
    "full-md": "w-full h-[60px] px-4 py-2 rounded-lg font-medium text-sm",
    fit: "min-w-[122px]	h-8 flex items-center justify-center		",
    fit_4: "w-[141px]	h-8	 flex items-center justify-center	",
    fit_2: "w-40 items-center justify-center	 h-8 	",
    fit_1: " w-[141px] flex items-center justify-center		 h-8 	",

    landing: "px-4 py-1.5 rounded-lg font-medium text-sm",
    landing_lg: "px-8 py-1.5 rounded-lg font-medium text-sm",
    servic: "h-10 w-36 mt-0.5	leading-4 gap-2	font-medium	font-Inter	  ",
    stubby: "min-h-[60px] px-4 rounded-lg font-medium text-sm",
};

const styles = {
    default:
        "text-white bg-blue-300 border border-blue-200 shadow-sm focus:border-blue-100 focus:ring focus:ring-blue-200",
    light_blue:
        "text-blue-300 bg-blue-200 border border-blue-100 focus:border-blue-100 focus:ring focus:ring-blue-200",
    green: "text-white bg-green-300 border border-none shadow-sm focus:border-none focus:ring focus:ring-none",
    outline:
        "bg-white border border-gray-200 text-gray-300 transition hover:brightness-110",
    "outline-blue":
        "bg-white border border-blue-200 text-blue-300 transition hover:bg-blue-300 hover:text-white",
    danger: "text-white bg-red-300 border border-red-300 shadow-sm focus:border-red-300/25 focus:ring focus:ring-red-300/25",
    warning:
        "border rounded-lg border-orange-300 text-center gap-1  p-4 text-white	bg-orange-300",
    white: "border rounded-lg border-blue-200 text-center gap-1  p-4 text-blue-300	bg-white",
    white_save:
        " border rounded-lg	border-blue-200	text-center gap-1  p-4 text-blue-300 normal font-medium text-sm font-Inter	",
    blue_view:
        " rounded-lg bg-blue-300 text-white text-center leading-4   normal font-medium text-sm font-Inter",
    white_save:
        " border rounded-lg	border-blue-200	text-center gap-1  p-4 text-blue-300	",
    blue_view:
        " rounded-lg bg-blue-300 text-white text-center leading-4   normal font-medium text-sm font-Inter",
    transparent: "bg-transparent !text-gray-300",
};
</script>

<template>
    <button
        v-if="!href"
        :type="type"
        :disabled="disabled"
        class="relative inline-flex items-center justify-center transition disabled:opacity-50 disabled:cursor-not-allowed"
        :class="[sizes[size], styles[buttonStyle]]"
    >
        <slot v-if="!loading" />
        <svg
            v-else
            class="animate-spin"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            width="20"
            height="20"
        >
            <circle
                style="opacity: 0.25"
                cx="12"
                cy="12"
                r="10"
                stroke="#fff"
                stroke-width="4"
            ></circle>
            <path
                fill="#fff"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            ></path>
        </svg>
    </button>
    <template v-else>
        <Link
            v-show="!disabled"
            :href="disabled ? null : href"
            class="relative inline-flex items-center transition disabled:opacity-50 disabled:cursor-not-allowed"
            :class="[
                sizes[size],
                disabled ? 'opacity-25 cursor-not-allowed' : '',
                styles[buttonStyle],
            ]"
        >
            <slot v-if="!loading" />
            <svg
                v-else
                class="animate-spin"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                width="20"
                height="20"
            >
                <circle
                    style="opacity: 0.25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="#fff"
                    stroke-width="4"
                ></circle>
                <path
                    fill="#fff"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
            </svg>
        </Link>
        <span
            v-show="disabled"
            class="inline-flex items-center transition disabled:opacity-25 disabled:cursor-not-allowed"
            :class="[
                sizes[size],
                disabled ? 'opacity-25 cursor-not-allowed' : '',
                styles[buttonStyle],
            ]"
        >
            <slot v-if="!loading" />
            <svg
                v-else
                class="animate-spin"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                width="20"
                height="20"
            >
                <circle
                    style="opacity: 0.25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="#fff"
                    stroke-width="4"
                ></circle>
                <path
                    fill="#fff"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
            </svg>
        </span>
    </template>
</template>
