blackcanyontickets/src/components/craft/components/EventDetails.tsx

import React from 'react';
import { useNode } from '@craftjs/core';

interface EventDetailsProps {
  showVenue?: boolean;
  showDateTime?: boolean;
  showDescription?: boolean;
  className?: string;
}

export const EventDetails: React.FC<EventDetailsProps> = ({
  showVenue = true,
  showDateTime = true,
  showDescription = true,
  className = ''
}) => {
  const { connectors: { connect, drag }, custom } = useNode();
  const { event, formattedDate, formattedTime } = custom || {};

  return (
    <div
      ref={(ref) => connect(drag(ref))}
      className={`bg-gradient-to-br from-slate-50 to-white rounded-xl p-4 sm:p-5 border border-slate-200 shadow-lg ${className}`}
    >
      <h2 className="text-base sm:text-lg font-semibold text-slate-900 mb-3 sm:mb-4 flex items-center">
        <div className="w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mr-2"></div>
        Event Details
      </h2>
      
      <div className="space-y-3">
        {/* Venue */}
        {showVenue && event?.venue && (
          <div className="flex items-start p-3 bg-white rounded-lg border border-slate-200">
            <div className="w-8 h-8 bg-gradient-to-br from-emerald-400 to-green-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
              <svg className="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
            </div>
            <div className="min-w-0 flex-1">
              <p className="font-medium text-slate-900">Venue</p>
              <p className="text-slate-600 text-sm break-words">{event.venue}</p>
            </div>
          </div>
        )}

        {/* Date & Time */}
        {showDateTime && formattedDate && (
          <div className="flex items-start p-3 bg-white rounded-lg border border-slate-200">
            <div className="w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg flex items-center justify-center mr-3 flex-shrink-0">
              <svg className="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div className="min-w-0 flex-1">
              <p className="font-medium text-slate-900">Date & Time</p>
              <p className="text-slate-600 text-sm break-words">{formattedDate} at {formattedTime}</p>
            </div>
          </div>
        )}
      </div>

      {/* Description */}
      {showDescription && event?.description && (
        <div className="mt-4 p-3 sm:p-4 bg-white rounded-lg border border-slate-200">
          <h3 className="text-sm font-semibold text-slate-900 mb-2 flex items-center">
            <div className="w-1 h-1 bg-gradient-to-r from-amber-400 to-orange-500 rounded-full mr-2"></div>
            About This Event
          </h3>
          <p className="text-slate-600 text-sm whitespace-pre-line leading-relaxed break-words">{event.description}</p>
        </div>
      )}
    </div>
  );
};

EventDetails.craft = {
  displayName: 'Event Details',
  props: {
    showVenue: true,
    showDateTime: true,
    showDescription: true,
    className: ''
  },
  related: {
    toolbar: () => (
      <div className="p-4 space-y-4">
        <div className="space-y-2">
          <label className="flex items-center">
            <input type="checkbox" className="mr-2" />
            Show Venue
          </label>
          <label className="flex items-center">
            <input type="checkbox" className="mr-2" />
            Show Date & Time
          </label>
          <label className="flex items-center">
            <input type="checkbox" className="mr-2" />
            Show Description
          </label>
        </div>
      </div>
    )
  }
};