import React from 'react';
import { Info } from 'lucide-react';

export function CustomFormStylePanel() {
  return (
    <div className="p-4 space-y-4">
      {/* Info alert — plain Tailwind, no shadcn Alert */}
      <div className="flex gap-3 bg-blue-50 border border-blue-200 rounded-lg p-3">
        <Info className="h-4 w-4 text-blue-600 mt-0.5 shrink-0" />
        <div>
          <p className="text-blue-800 text-sm font-semibold">Block-Level Styling Only</p>
          <p className="text-blue-700 text-xs mt-1">
            Global styling has been disabled to provide more granular control.
            Please select individual blocks (Title, Body, Footer, etc.) to customize
            their appearance independently.
          </p>
        </div>
      </div>

      <div className="text-xs text-slate-500 text-center mt-8">
        Select a block in the editor to view its specific styling options.
      </div>
    </div>
  );
}

export default CustomFormStylePanel;
