import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import type { BookingWidgetProps } from '../../types';
import BookingWidgetComponent from '../../../components/booking/BookingWidget';

export const BookingWidget: ComponentConfig<BookingWidgetProps> = {
  label: 'Booking Widget',
  fields: {
    serviceMode: {
      type: 'select',
      label: 'Service Display Mode',
      options: [
        { label: 'All Services', value: 'all' },
        { label: 'By Category', value: 'category' },
        { label: 'Specific Services', value: 'specific' },
      ],
    },
    categoryId: {
      type: 'text',
      label: 'Category ID (for category mode)',
    },
    serviceIds: {
      type: 'array',
      arrayFields: {
        id: { type: 'text', label: 'Service ID' },
      },
      label: 'Service IDs (for specific mode)',
    },
    headline: {
      type: 'text',
      label: 'Headline',
    },
    subheading: {
      type: 'text',
      label: 'Subheading',
    },
    showDuration: {
      type: 'radio',
      label: 'Show Duration',
      options: [
        { label: 'Yes', value: true },
        { label: 'No', value: false },
      ],
    },
    showPrice: {
      type: 'radio',
      label: 'Show Price',
      options: [
        { label: 'Yes', value: true },
        { label: 'No', value: false },
      ],
    },
    showDeposits: {
      type: 'radio',
      label: 'Show Deposits',
      options: [
        { label: 'Yes', value: true },
        { label: 'No', value: false },
      ],
    },
    requireLogin: {
      type: 'radio',
      label: 'Require Login',
      options: [
        { label: 'No', value: false },
        { label: 'Yes', value: true },
      ],
    },
    ctaAfterBooking: {
      type: 'text',
      label: 'CTA After Booking',
    },
  },
  defaultProps: {
    serviceMode: 'all',
    headline: 'Schedule Your Appointment',
    subheading: 'Choose a service and time that works for you',
    showDuration: true,
    showPrice: true,
    showDeposits: true,
    requireLogin: false,
  },
  render: ({
    headline,
    subheading,
  }) => {
    // Use the existing BookingWidget component
    // Advanced filtering (serviceMode, categoryId, serviceIds) would be
    // implemented in the BookingWidget component itself
    return (
      <div className="py-8">
        <div className="text-center mb-8">
          {headline && (
            <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
              {headline}
            </h2>
          )}
          {subheading && (
            <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              {subheading}
            </p>
          )}
        </div>
        <BookingWidgetComponent
          headline=""
          subheading=""
        />
      </div>
    );
  },
};

export default BookingWidget;
