'use client';
import { cn } from '@/lib/utils';
import { Plus } from 'lucide-react';
import Image from 'next/image';
interface ComponentPreviewProps {
  title: string;
  preview: string;
  onClick?: () => void;
}

export function ComponentPreview({ title, preview, onClick }: ComponentPreviewProps) {
  return (
    <button
      onClick={onClick}
      className={cn(
        'group flex items-center w-full h-auto rounded-lg overflow-hidden gap-2',
        'border border-neutral-200 hover:border-neutral-500 transition-colors pointer',
        onClick ? 'cursor-pointer' : 'cursor-default'
      )}
    >
      <div className='w-72 relative flex-shrink-0'>
        <Image src={preview} alt={title} width={300} height={200} className='object-contain' />
      </div>

      <div className='flex-1 flex items-center justify-between px-4'>
        <div className='text-left'>
          <h3 className='text-sm font-medium text-neutral-900'>{title}</h3>
        </div>

        {onClick && (
          <div className='ml-2 flex-shrink-0'>
            <div className='p-1 rounded-full bg-neutral-50 text-neutral-600 group-hover:bg-neutral-200 transition-colors'>
              <Plus className='w-4 h-4' />
            </div>
          </div>
        )}
      </div>
    </button>
  );
}
