import { useState } from "react";

export default function DentalClinicApp() {
  const [step, setStep] = useState("book");
  const [rating, setRating] = useState(0);

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center p-6">
      <h1 className="text-2xl font-bold mb-6">🦷 SmileCare Dental Clinic</h1>

      {step === "book" && (
        <div className="bg-white shadow-lg rounded-xl p-6 w-full max-w-md">
          <h2 className="text-xl font-semibold mb-4">Book Appointment</h2>
          <label className="block mb-2">Select Service</label>
          <select className="w-full border rounded p-2 mb-4">
            <option>Cleaning</option>
            <option>Extraction</option>
            <option>Braces Consultation</option>
            <option>Root Canal</option>
          </select>
          <label className="block mb-2">Choose Date</label>
          <input type="date" className="w-full border rounded p-2 mb-4" />
          <button
            onClick={() => setStep("rate")}
            className="bg-blue-600 text-white px-4 py-2 rounded-lg w-full"
          >
            Confirm Appointment
          </button>
        </div>
      )}

      {step === "rate" && (
        <div className="bg-white shadow-lg rounded-xl p-6 w-full max-w-md">
          <h2 className="text-xl font-semibold mb-4">Rate Your Experience</h2>
          <div className="flex space-x-2 mb-4">
            {[1, 2, 3, 4, 5].map((star) => (
              <button
                key={star}
                onClick={() => setRating(star)}
                className={`text-2xl ${
                  rating >= star ? "text-yellow-500" : "text-gray-400"
                }`}
              >
                ★
              </button>
            ))}
          </div>
          <textarea
            placeholder="Leave feedback..."
            className="w-full border rounded p-2 mb-4"
          />
          <button
            onClick={() => alert("Thanks for your feedback!")}
            className="bg-green-600 text-white px-4 py-2 rounded-lg w-full"
          >
            Submit Feedback
          </button>
        </div>
      )}