src/components/carousel/VariantSwitcher.tsx

'use client';

import { useState } from 'react';
import type { Template, Variant } from '@/types/carousel';
import { getTemplate } from '@/types/carousel';

interface VariantSwitcherProps {
  template: Template;
  activeVariant: Variant;
  onSwitch: (variant: Variant) => void;
}

export default function VariantSwitcher({ template, activeVariant, onSwitch }: VariantSwitcherProps): React.ReactElement {
  const [showDetails, setShowDetails] = useState(false);
  const templateConfig = getTemplate(template);

  if (!templateConfig) return <div>Invalid template</div>;

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <label className="text-xs font-medium text-gray-600">Design Variant</label>
        <button
          onClick={() => setShowDetails(!showDetails)}
          className="text-xs text-blue-600 hover:text-blue-700"
        >
          {showDetails ? 'Hide details' : 'Show details'}
        </button>
      </div>

      <div className="flex items-center gap-2 bg-gray-100 rounded-lg p-1 w-fit">
        {templateConfig.variants.map((v) => (
          <button
            key={v.id}
            onClick={() => onSwitch(v.id)}
            className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
              activeVariant === v.id
                ? 'bg-white text-gray-900 shadow-sm'
                : 'text-gray-500 hover:text-gray-700'
            }`}
            title={v.description}
          >
            {v.name}
          </button>
        ))}
      </div>

      {showDetails && (
        <div className="bg-blue-50 rounded-lg p-3 border border-blue-200">
          {templateConfig.variants.find(v => v.id === activeVariant) && (
            <p className="text-xs text-blue-900">
              <span className="font-semibold">{templateConfig.variants.find(v => v.id === activeVariant)?.name}:</span>{' '}
              {templateConfig.variants.find(v => v.id === activeVariant)?.description}
            </p>
          )}
        </div>
      )}
    </div>
  );
}