@props([
    'content' => '',
    'class' => '',
    'default' => '-'
])

@php
    // Check if content contains HTML tags
    $isHtml = $content && preg_match('/<[^>]+>/', $content);

    // Clean HTML content if it contains tags
    $cleanContent = '';
    if ($content) {
        if ($isHtml) {
            // Use purifier if available, otherwise strip tags
            $cleanContent = function_exists('clean') ? clean($content) : strip_tags($content, '<p><br><strong><b><em><i><u><s><del><code><pre><ul><ol><li><a><span>');
        } else {
            $cleanContent = nl2br(e($content));
        }
    }
@endphp

@if($content)
<div {{ $attributes->merge(['class' => 'catatan-content-display ' . ($isHtml ? 'catatan-content-html' : 'catatan-content-plain') . ' ' . $class]) }}>{!! $cleanContent !!}</div>
@else
<div {{ $attributes->merge(['class' => 'catatan-content-display catatan-content-plain ' . $class]) }}>{{ $default }}</div>
@endif

@once
@push('styles')
<style>
/* Plain text catatan (legacy) */
.catatan-content-plain {
    white-space: pre-line;
    line-height: 1.6;
}

/* HTML catatan (new) */
.catatan-content-html {
    white-space: normal;
    line-height: 1.6;
}

.catatan-content-html p {
    margin-bottom: 0.5em;
}

.catatan-content-html p:last-child {
    margin-bottom: 0;
}

.catatan-content-html ul,
.catatan-content-html ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.catatan-content-html li {
    margin-bottom: 0.25em;
}

.catatan-content-html strong,
.catatan-content-html b {
    font-weight: 600;
}

.catatan-content-html em,
.catatan-content-html i {
    font-style: italic;
}

.catatan-content-html u {
    text-decoration: underline;
}

.catatan-content-html s,
.catatan-content-html del {
    text-decoration: line-through;
}

.catatan-content-html code {
    background-color: #f1f1f1;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
    color: #c7254e;
}

.catatan-content-html pre {
    background-color: #f5f5f5;
    padding: 0.75em 1em;
    border-radius: 4px;
    overflow-x: auto;
    font-family: monospace;
    font-size: 0.9em;
}

.catatan-content-html a {
    color: #0d6efd;
    text-decoration: underline;
}

.catatan-content-html a:hover {
    color: #0a58ca;
}
</style>
@endpush
@endonce