<template>
  <div
    :id="id"
    :class="eventClasses"
    role="status"
    aria-live="assertive"
  >
    <div :class="styles.eventPillTextWrapper">
      <Typography variant="title2-semibold" component="div">
        {{ text }}
      </Typography>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, useCssModule } from 'vue'
import Typography from './Typography.vue'

/**
 * ChatEvent - Display chat event notifications
 *
 * Used for system messages like "Conversation started", "Agent joined", etc.
 * These are informational messages that are not part of the conversation flow.
 */

interface Props {
  /** Event text to display */
  text?: string
  /** Additional CSS class names */
  className?: string
  /** Element ID */
  id?: string
}

const props = withDefaults(defineProps<Props>(), {
  text: '',
  className: '',
  id: undefined,
})

// Access CSS module classes
const styles = useCssModule()

/**
 * Compute combined class names
 */
const eventClasses = computed(() => {
  const classes = [styles.eventPill]

  if (props.className) {
    classes.push(props.className)
  }

  return classes
})
</script>

<style module>
.eventPill {
  display: flex;
  max-width: 250px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-inline: auto;
  margin-block-start: 40px;
  font-family: var(--cc-font-family, 'Figtree', sans-serif);
}

.eventPillTextWrapper {
  border-radius: 15px;
  background: var(--cc-chat-event-background, rgba(0, 0, 0, 0.8));
  color: var(--cc-chat-event-text-color, #ffffff);
  padding: 8px 12px;
  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
}
</style>
