<template>
    <div v-if="url" class="productLink">
        <a :href="url" target="_blank" class="productLink__content">
            {{ productName || "View Product" }}
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="icon icon--small"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                />
            </svg>
        </a>
    </div>
</template>

<script>
export default {
    name: 'productLink',
    props: {
        url: {
            type: String,
            default: ''
        },
        productName: {
            type: String,
            default: ''
        }
    }

}
</script>

<style lang="less">
.productLink {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(191, 219, 254, 0.5);

    &__content {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--color-blue-600);
        font-weight: 600;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
        transition: color 0.2s;

        &:hover {
            color: var(--color-blue-800);
        }
    }
}

</style>
