<template>
    <div class="pp-toast p-none" :class="'pp-toast--' + type" role="alert">
        <div class="pp-toast__body">
            <div class="pp-toast__content">
                <span class="pp-toast__title">{{ title }}</span>
                <span class="pp-toast__message">{{ message }}</span>
            </div>
            <button class="pp-toast__close" aria-label="Close" @click.prevent="$emit('dismiss')">&#x2715;</button>
        </div>
        <div class="pp-toast__bar" :style="{ animationDuration: timeout + 'ms' }"></div>
    </div>
</template>
<script>
export default {
    props: {
        message: { type: String, default: 'This is a default alert' },
        title:   { type: String, default: 'Alert' },
        type:    { type: String, default: 'info' },
        timeout: { type: [String, Number], default: 8000 }
    },
    mounted() {
        setTimeout(() => this.$emit('dismiss'), Number(this.timeout));
    }
}
</script>
<style scoped>
.pp-toast {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    overflow: hidden;
    margin: 6px 10px;
    min-width: 260px;
    max-width: 360px;
    border-left: 4px solid #6c757d;
}
.pp-toast--success { border-left-color: #198754; }
.pp-toast--danger  { border-left-color: #dc3545; }
.pp-toast--warning { border-left-color: #ffc107; }
.pp-toast--info    { border-left-color: #0dcaf0; }
.pp-toast--primary { border-left-color: #0d6efd; }

.pp-toast__body {
    display: flex;
    align-items: flex-start;
    padding: 10px 12px 8px;
    gap: 10px;
}
.pp-toast__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.pp-toast__title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-toast__message {
    font-size: 0.78rem;
    color: #555;
    margin-top: 2px;
    word-break: break-word;
}
.pp-toast__close {
    background: none;
    border: none;
    font-size: 0.75rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.pp-toast__close:hover { color: #333; }

.pp-toast__bar {
    height: 3px;
    background: currentColor;
    opacity: 0.35;
    animation: pp-shrink linear forwards;
    transform-origin: left;
}
.pp-toast--success .pp-toast__bar { background: #198754; }
.pp-toast--danger  .pp-toast__bar { background: #dc3545; }
.pp-toast--warning .pp-toast__bar { background: #ffc107; }
.pp-toast--info    .pp-toast__bar { background: #0dcaf0; }
.pp-toast--primary .pp-toast__bar { background: #0d6efd; }

@keyframes pp-shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
</style>