@extends('layouts.app')
@section('title', $blog->title . ' | Dr. Rajan Shah')

@if($blog->meta_description)
    @section('meta_description', $blog->meta_description)
@endif

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="mb-8">
        <a href="{{ route('blogs.index') }}" class="text-teal-600 hover:text-teal-800 font-medium">&larr; Back to all blogs</a>
    </div>

    <article class="bg-white rounded-lg shadow-md overflow-hidden">
        @if($blog->image_url)
            <img class="w-full h-auto" src="{{ $blog->image_url }}" alt="{{ $blog->title }}">
        @endif
        
        <div class="p-8">
            <header class="mb-8 border-b pb-8">
                <h1 class="text-3xl font-bold text-gray-900 sm:text-4xl mb-4">{{ $blog->title }}</h1>
                <p class="text-gray-500">Published on {{ $blog->created_at->format('F d, Y') }}</p>
            </header>
            
            <div class="prose prose-teal prose-lg max-w-none text-gray-800">
                {!! $blog->content !!}
            </div>
        </div>
    </article>
</div>
@endsection
