'use client';

import * as React from 'react';

import { cn } from '@udecode/cn';

import { Index } from '@/__registry__';
import { useConfig } from '@/hooks/use-config';

import { Icons } from './icons';

interface ThemeComponentProps extends React.HTMLAttributes<HTMLDivElement> {
  name: string;
  align?: 'center' | 'end' | 'start';
  extractClassname?: boolean;
  extractedClassNames?: string;
}

export function ThemeComponent({ name, ...props }: ThemeComponentProps) {
  const [config] = useConfig();

  const Preview = React.useMemo(() => {
    const Component = Index[config.style][name]?.component;

    if (!Component) {
      return (
        <p className="text-sm text-muted-foreground">
          Component{' '}
          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
            {name}
          </code>{' '}
          not found in registry.
        </p>
      );
    }

    return <Component />;
  }, [name, config.style]);

  return (
    <div className={cn('relative')} {...props}>
      <React.Suspense
        fallback={
          <div className="flex items-center text-sm text-muted-foreground">
            <Icons.spinner className="mr-2 size-4 animate-spin" />
            Loading...
          </div>
        }
      >
        {Preview}
      </React.Suspense>
    </div>
  );
}
