@props(['item' => [], 'showActions' => true])

@php
$statusColors = [
    'pending' => 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
    'in_progress' => 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
    'completed' => 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
    'overdue' => 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
];
@endphp

<div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-4 hover:shadow-md transition-all duration-200">
    <div class="flex items-start justify-between mb-2">
        <div class="flex items-center gap-2">
            <span class="text-lg">📋</span>
            <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ $item['title'] ?? '' }}</h3>
        </div>
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $statusColors[$item['status'] ?? 'pending'] }}">
            {{ ucfirst(str_replace('_', ' ', $item['status'] ?? 'pending')) }}
        </span>
    </div>

    @if(isset($item['description']))
        <p class="text-sm text-slate-500 dark:text-slate-400 mb-3 line-clamp-2">{{ $item['description'] }}</p>
    @endif

    <div class="flex items-center gap-4 text-xs text-slate-500 dark:text-slate-400">
        @if(isset($item['teacher']))
            <span class="flex items-center gap-1">
                <span>👤</span> {{ $item['teacher'] }}
            </span>
        @endif
        @if(isset($item['due_date']))
            <span class="flex items-center gap-1">
                <span>📅</span> {{ $item['due_date'] }}
            </span>
        @endif
    </div>

    @if($showActions && ($item['status'] ?? '') !== 'completed')
        <div class="flex items-center gap-2 mt-3 pt-3 border-t border-slate-100 dark:border-slate-700">
            <button class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-semibold rounded-lg transition-colors">{{ __('Mark Complete') }}</button>
            <a href="{{ url('/parent/action-items/' . ($item['id'] ?? '')) }}" class="px-3 py-1.5 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 text-xs font-semibold rounded-lg transition-colors">{{ __('View Detail') }}</a>
        </div>
    @endif
</div>