'use client';

import { useEffect, useState } from 'react';
import { scanComponentRegistry, type RegistryData } from './actions';
import ComponentRegistryClient from './ComponentRegistryClient';

export default function ComponentRegistryPage() {
  const [registry, setRegistry] = useState<RegistryData | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    scanComponentRegistry()
      .then(setRegistry)
      .finally(() => setIsLoading(false));
  }, []);

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
        <div className="text-center">
          <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-3" />
          <p className="text-sm text-gray-500">컴포넌트 스캔 중...</p>
        </div>
      </div>
    );
  }

  if (!registry) {
    return (
      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
        <p className="text-sm text-red-500">스캔에 실패했습니다.</p>
      </div>
    );
  }

  return <ComponentRegistryClient registry={registry} />;
}
