@props([
'subject' => null,
'title' => null,
'subtitle' => null,
'align' => 'left',
'class' => '',
])

@php
$alignClass = match ($align) {
'center' => 'text-center',
'right' => 'text-right',
default => 'text-left',
};
$marginClass = match ($align) {
'center' => 'mx-auto',
'right' => 'mr-0 ml-auto',
default => 'ml-0',
};
$subtitles = is_array($subtitle) ? $subtitle : ($subtitle ? [$subtitle] : []);
@endphp

<div {{ $attributes->merge(['class' => cn('mb-10', $alignClass, $class)]) }} data-animate="appear">
    @if($subject)
    <x-atoms.subject class="{{ $marginClass }}">{{ $subject }}</x-atoms.subject>
    @endif
    @if($title)
    <h2 class="{{ cn('w-fit text-3xl md:text-4xl lg:text-5xl font-regular text-foreground mb-8 leading-[--gold] text-pretty', $marginClass) }}">
        {!! $title !!}
    </h2>
    @endif
    @foreach($subtitles as $text)
    <p class="{{ cn('text-foreground max-w-[600px] leading-[--gold] lg:text-xl mb-4', $marginClass) }}">
        {!! $text !!}
    </p>
    @endforeach
</div>