components/QuoteBox.js

import { Quote as QuoteIcon } from 'lucide-react'

export default function QuoteBox({ data, onUpdate }) {
  const quote = data || {
    text: "The only way to learn is by doing.",
    author: "Albert Einstein"
  }

  return (
    <div className="my-6">
      <div className="bg-orange-50 border-l-4 border-orange-500 p-6 rounded-r-lg">
          <QuoteIcon className="h-6 w-6 text-orange-400 mb-2" />
          <p className="text-orange-800 text-lg italic">"{quote.text}"</p>
          <p className="text-orange-700 font-medium mt-2">— {quote.author}</p>
        </div>
      </div>
    </div>
  )
}