<template>
    <table class="hy-table" :class="{ showBorder }">
        <slot />
    </table>
</template>

<script>
export default {
    name: "HyTable",
    props: {
        showBorder: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {};
    },
};
</script>

<style lang="scss">
.hy-table {
    width: 100%;
    border-spacing: 0;
    background-color: var(--hy-section-bg-color);
    border-radius: var(--hy-element-border-radius);
    margin: var(--hy-element-margin);

    display: block;
    overflow-x: auto;
    white-space: nowrap;

    &.showBorder {
        border: var(--hy-element-border-secondary);
        box-shadow: var(--hy-element-shadow);
    }

    &,
    tr {
        width: 100%;
    }

    tr:nth-child(even) td {
        background-color: var(--hy-color-gray-3);
    }

    tr:first-child {
        td:first-child,
        th:first-child {
            border-top-left-radius: var(--hy-element-border-radius);
        }

        td:last-child,
        th:last-child {
            border-top-right-radius: var(--hy-element-border-radius);
        }
    }

    tr:last-child {
        td:first-child {
            border-bottom-left-radius: var(--hy-element-border-radius);
        }

        td:last-child {
            border-bottom-right-radius: var(--hy-element-border-radius);
        }
    }

    td,
    th {
        padding: var(--hy-element-padding);
        text-align: left;
    }

    td {
        white-space: nowrap;
    }

    th {
        border-bottom: var(--hy-element-border-secondary);
        background-color: var(--hy-section-bg-color);
    }
}
</style>
