<script setup lang="ts">
import type { CSSProperties } from 'vue';

import { ChevronsLeft, ChevronsRight } from '@easyflow-core/icons';

const collapsed = defineModel<boolean>('collapsed');
const buttonStyle: CSSProperties = {
  backgroundColor: 'hsl(var(--nav-tool-bg) / 0.92)',
  backgroundImage:
    'linear-gradient(180deg, hsl(var(--nav-tool-bg) / 0.96), hsl(var(--glass-tint) / 0.82))',
  border: '1px solid transparent',
  boxShadow: '0 18px 36px -28px hsl(var(--primary) / 0.24)',
};

function handleCollapsed() {
  collapsed.value = !collapsed.value;
}
</script>

<template>
  <button
    aria-label="切换侧边栏折叠状态"
    :style="buttonStyle"
    class="flex-center hover:text-foreground h-9 w-9 rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]"
    @click.stop="handleCollapsed"
  >
    <ChevronsRight v-if="collapsed" class="size-4" />
    <ChevronsLeft v-else class="size-4" />
  </button>
</template>
