'use client';
import { useEffect, useState } from 'react';

export default function WidgetPage() {
    const [tasks, setTasks] = useState<any[]>([]);
    useEffect(() => {
        const token = localStorage.getItem('taskteam_token');
        if (token) {
            fetch('/api/v1/tasks?limit=5&status=pending', { headers: { Authorization: 'Bearer ' + token } })
                .then(r => r.json()).then(d => setTasks(d.data || []));
        }
    }, []);
    return (
        <div style={{ padding: 8, background: '#0F172A', minHeight: '100vh', color: 'white', fontSize: 14 }}>
            <div style={{ fontWeight: 'bold', marginBottom: 8 }}>Task Team</div>
            {tasks.map(t => (
                <div key={t.id} style={{ padding: '6px 0', borderBottom: '1px solid #1E293B', display: 'flex', gap: 8, alignItems: 'center' }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: t.status === 'in_progress' ? '#F59E0B' : '#6B7280', flexShrink: 0 }} />
                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.title}</span>
                </div>
            ))}
            {!tasks.length && <div style={{ opacity: 0.5 }}>Zadne ukoly</div>}
        </div>
    );
}