<script lang="tsx">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const expandRow = ref(false)

    const toggleExpandRow = () => {
      expandRow.value = !expandRow.value
    }

    return () => (
      <div
        class={`ark-ui-table-expand-button ${expandRow.value ? 'is-expanded' : ''}`}
        onClick={toggleExpandRow}
      />
    )
  },
})
</script>

<style lang="scss" scoped>
.ark-ui-table-expand-button {
  width: 16px;
  height: 16px;
  transition: 0.4s;
  background: url('./../assets/expand-row-button.svg') center center no-repeat;
  cursor: pointer;

  &.is-expanded {
    background: url('./../assets/expand-row-button-dark.svg') center center no-repeat;
  }
}
</style>
