import { useState, useEffect } from 'react';
import './styles.css';

export default function UtimeUoffUcalendar() {
  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setData([{ id: '1', name: 'Sample Item' }]);
    setLoading(false);
  }, []);

  if (loading) return <div className="container"><div className="loading">Loading...</div></div>;

  return (
    <div className="container">
      <div className="header">
        <h1>time off calendar</h1>
        <p className="subtitle">{data.length} items</p>
      </div>
      <div className="card">
        <pre className="data-preview">{JSON.stringify(data, null, 2)}</pre>
      </div>
    </div>
  );
}
