'use client';
import React from 'react';
import { Options } from 'qr-code-styling';

interface DesignPanelProps {
  options: Options;
  onChange: (options: Options) => void;
}

export default function DesignPanel({ options, onChange }: DesignPanelProps) {
  
  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange({
      ...options,
      dotsOptions: { ...options.dotsOptions, color: e.target.value }
    });
  };

  const handleDotTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onChange({
      ...options,
      dotsOptions: { ...options.dotsOptions, type: e.target.value as any }
    });
  };

  const handleEyeTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onChange({
      ...options,
      cornersSquareOptions: { ...options.cornersSquareOptions, type: e.target.value as any }
    });
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-6">
      <h2 className="text-xl font-bold text-gray-800 border-b pb-4">Design Customization</h2>
      
      {/* Colors */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Dot Color</label>
        <div className="flex items-center gap-4">
          <input 
            type="color" 
            value={options.dotsOptions?.color || '#000000'} 
            onChange={handleColorChange}
            className="w-10 h-10 rounded cursor-pointer border-0 p-0"
          />
          <span className="text-gray-500 font-mono text-sm">{options.dotsOptions?.color}</span>
        </div>
      </div>

      {/* Shapes */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Dot Pattern</label>
        <select 
          value={options.dotsOptions?.type || 'square'}
          onChange={handleDotTypeChange}
          className="w-full border-gray-300 rounded-lg shadow-sm p-2 border focus:ring-indigo-500 focus:border-indigo-500"
        >
          <option value="square">Square</option>
          <option value="dots">Dots</option>
          <option value="rounded">Rounded</option>
          <option value="extra-rounded">Extra Rounded</option>
          <option value="classy">Classy</option>
          <option value="classy-rounded">Classy Rounded</option>
        </select>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Eye Frame Shape</label>
        <select 
          value={options.cornersSquareOptions?.type || 'square'}
          onChange={handleEyeTypeChange}
          className="w-full border-gray-300 rounded-lg shadow-sm p-2 border focus:ring-indigo-500 focus:border-indigo-500"
        >
          <option value="square">Square</option>
          <option value="dot">Dot</option>
          <option value="extra-rounded">Extra Rounded</option>
        </select>
      </div>
      
    </div>
  );
}
