<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const props = withDefaults(
  defineProps<{ items: string[]; embedded?: boolean }>(),
  { embedded: false },
);

const text = computed(() => {
  const list = props.items.filter(Boolean);
  if (!list.length) return '';
  return list.join('　　◆　　');
});
</script>

<template>
  <div v-if="text" class="marquee-bar" :class="{ embedded }">
    <span class="marquee-badge">{{ t('home.announcement_badge') }}</span>
    <div class="marquee-viewport">
      <div class="marquee-track">
        <span class="marquee-text">{{ text }}</span>
        <span class="marquee-text" aria-hidden="true">{{ text }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.marquee-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -4px -2px 14px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.marquee-bar.embedded {
  margin: 0;
  padding: 8px 12px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-body);
}

.marquee-bar.embedded .marquee-badge {
  padding: 3px 8px;
  font-size: 10px;
}

.marquee-bar.embedded .marquee-text {
  font-size: 12px;
}

.marquee-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  background: var(--gradient-primary);
  border: none;
  border-radius: 4px;
}

.marquee-viewport {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 18s linear infinite;
}

.marquee-text {
  flex-shrink: 0;
  padding-right: 80px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
</style>
