Build a Custom Lorem Ipsum Generator in React

const loremText = [
  "Lorem ipsum dolor sit amet...",
  "Duis aute irure dolor in...",
  "Sed ut perspiciatis unde...",
  // Add as many unique paragraphs as you want!
];

const generate = (count) => {
  // Create an array of 'count' length
  // Map each index to a paragraph from our source bank
  return Array.from({ length: count }, (_, i) => {
      // i % length ensures we loop back to start if we run out
      return loremText[i % loremText.length];
  }).join("\n\n"); // Join with double newline for distinct blocks
};

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(result);
    // Show a "Copied!" toast or change button text
    setCopied(true);
    // Hide "Copied!" after 2 seconds
    setTimeout(() => setCopied(false), 2000);
  } catch (err) {
    console.error("Failed to copy!", err);
  }
};

"use client"

import { useState } from "react"
import { Copy, Check, FileText } from "lucide-react"

// Our "Bank" of text
const loremText = [
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
  "Duis aute irure dolor in reprehenderit in voluptate...",
  "Sed ut perspiciatis unde omnis iste natus error...",
  "Nemo enim ipsam voluptatem quia voluptas sit aspernatur...",
  "At vero eos et accusamus et iusto odio dignissimos...",
]

export function LoremIpsumGenerator() {
  // --- STATE ---
  const [count, setCount] = useState("3")
  const [result, setResult] = useState("")
  const [copied, setCopied] = useState(false)
  const [isGenerating, setIsGenerating] = useState(false)

  // --- ACTIONS ---
  const handleGenerate = () => {
    setIsGenerating(true)
    
    // Simulate thinking time (optional, but feels nice)
    setTimeout(() => {
      const num = parseInt(count) || 1
      
      // The Modulo Logic from Step 2
      const text = Array.from({ length: num }, (_, i) => 
        loremText[i % loremText.length]
      ).join("\n\n")
      
      setResult(text)
      setIsGenerating(false)
    }, 300)
  }

  const handleCopy = () => {
    navigator.clipboard.writeText(result)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  // --- UI RENDER ---
  return (
    <div className="max-w-2xl mx-auto space-y-6">
      
      {/* 1. Control Card */}
      <div className="bg-white border rounded-lg p-6 shadow-sm">
        <div className="flex items-center gap-2 mb-4 text-blue-600">
          <FileText className="h-5 w-5" />
          <h2 className="text-xl font-bold">Lorem Ipsum Generator</h2>
        </div>
        
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Paragraphs Needed
            </label>
            <input
              type="number"
              min="1"
              max="50"
              value={count}
              onChange={(e) => setCount(e.target.value)}
              className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none"
            />
          </div>

          <button
            onClick={handleGenerate}
            disabled={isGenerating || !count}
            className="w-full py-2 bg-blue-600 text-white font-medium rounded hover:bg-blue-700 disabled:opacity-50 transition"
          >
            {isGenerating ? "Generating..." : "Generate Text"}
          </button>
        </div>
      </div>

      {/* 2. Result Card */}
      {result && (
        <div className="bg-white border rounded-lg p-6 shadow-sm animate-in fade-in slide-in-from-bottom-2">
          <div className="flex justify-between items-center mb-4">
            <h3 className="font-bold text-gray-800">Generated Text</h3>
            
            <button
              onClick={handleCopy}
              className="flex items-center gap-1 text-sm text-gray-600 hover:text-blue-600 transition"
            >
              {copied ? <Check size={16} /> : <Copy size={16} />}
              {copied ? "Copied!" : "Copy Text"}
            </button>
          </div>
          
          <div className="p-4 bg-slate-50 rounded text-slate-700 leading-relaxed whitespace-pre-wrap font-serif text-sm">
            {result}
          </div>
        </div>
      )}
    </div>
  )
}