Create Your Neon Sign

import React, { useState } from "react";

const NeonSignBuilder = () => {
  const [text, setText] = useState("Neon Text");
  const [font, setFont] = useState("Arial");
  const [color, setColor] = useState("#ff00ff");
  const [size, setSize] = useState(50);

  return (
    <div className="p-6 max-w-2xl mx-auto">
      <h2 className="text-xl font-bold mb-4">Create Your Neon Sign</h2>
      
      {/* Input Fields */}
      <div className="mb-4">
        <label className="block text-sm font-medium">Enter Text:</label>
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          className="w-full p-2 border rounded"
        />
      </div>
      
      <div className="mb-4">
        <label className="block text-sm font-medium">Choose Font:</label>
        <select value={font} onChange={(e) => setFont(e.target.value)} className="w-full p-2 border rounded">
          <option value="Arial">Arial</option>
          <option value="Courier New">Courier New</option>
          <option value="Pacifico">Pacifico</option>
          <option value="Neon Tubes">Neon Tubes</option>
        </select>
      </div>

      <div className="mb-4">
        <label className="block text-sm font-medium">Choose Color:</label>
        <input type="color" value={color} onChange={(e) => setColor(e.target.value)} className="w-full p-2 border rounded" />
      </div>

      <div className="mb-4">
        <label className="block text-sm font-medium">Size (px):</label>
        <input type="number" value={size} onChange={(e) => setSize(e.target.value)} className="w-full p-2 border rounded" />
      </div>

      {/* Neon Text Preview */}
      <div className="border p-6 rounded-lg text-center" style={{ background: "#222", padding: "20px" }}>
        <p
          style={{
            fontFamily: font,
            color: color,
            fontSize: `${size}px`,
            textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,
          }}
        >
          {text}
        </p>
      </div>

      {/* Button */}
      <button className="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Get Quote</button>
    </div>
  );
};

export default NeonSignBuilder;