import React from 'react';
import { UiElementItem } from './types';

const ElementPreview = ({ item }: { item: UiElementItem }) => {
  const commonStyle: React.CSSProperties = {
    color: item.settings.style.color,
    backgroundColor: item.settings.style.backgroundColor,
    border: item.settings.style.border,
  };

  if (item.elementType === 'nav_button') {
    return (
      <button
        className='rounded px-3 py-1 text-xs font-semibold'
        style={commonStyle}
      >
        {item.settings.content.text || 'Open'}
      </button>
    );
  }

  if (item.elementType === 'tooltip') {
    return (
      <div
        className='inline-block rounded px-2 py-1 text-xs'
        style={commonStyle}
      >
        {item.settings.content.text || 'Tooltip'}
      </div>
    );
  }

  if (item.elementType === 'gallery' || item.elementType === 'carousel') {
    return (
      <div className='flex gap-1'>
        <div className='h-6 w-6 rounded' style={commonStyle} />
        <div className='h-6 w-6 rounded opacity-80' style={commonStyle} />
        <div className='h-6 w-6 rounded opacity-60' style={commonStyle} />
      </div>
    );
  }

  if (item.elementType === 'video_player') {
    return (
      <div className='rounded px-3 py-1 text-xs' style={commonStyle}>
        ▶ {item.settings.content.title || 'Video'}
      </div>
    );
  }

  if (item.elementType === 'logo') {
    return (
      <div
        className='rounded px-2 py-1 text-xs font-semibold'
        style={commonStyle}
      >
        {item.settings.content.text || 'LOGO'}
      </div>
    );
  }

  if (item.elementType === 'popup') {
    return (
      <div className='rounded px-2 py-1 text-xs' style={commonStyle}>
        □ {item.settings.content.title || 'Popup'}
      </div>
    );
  }

  return (
    <div className='rounded px-2 py-1 text-xs' style={commonStyle}>
      {item.settings.content.text || item.name}
    </div>
  );
};

export default ElementPreview;