import React, { useState, useEffect } from 'react';
import { Copy, Check, Code, Eye } from 'lucide-react';
export default function ThreadsGenerator() {
const [formData, setFormData] = useState({
displayName: 'IMA WACO',
username: 'ikmalogic',
profilePic: 'https://ik.imagekit.io/ikmalogic/LP%20IMA%20WACO%20/1.png',
price: '22.000',
linkText: 's.id/ikmalogic/',
checkoutLink: 'https://lynk.id/ikmalogic/5ejkk58lwlgm/checkout?token=cGFyYW1zPSU1QiU1RCZiaWRfcHJpY2U9MCZxdHlfcHJvZD0x',
bio: 'Custom Gem pembuat ilustrasi cat air atau style watercolor. bisa prompt pendek maupun panjang. bisa juga buat bikin carousel.',
content: "Solusi buat yang buntu ide visual. 🤯\n\nIMA WACO bisa ubah prompt singkat jadi ilustrasi watercolor yang 'deep' banget. Cocok buat poster kajian atau carousel.\n\nCek hasilnya di slide bawah 👇",
slideCount: 3,
slides: [
'https://ik.imagekit.io/ikmalogic/LP%20IMA%20WACO%20/1.png',
'https://ik.imagekit.io/ikmalogic/LP%20IMA%20WACO%20/2.png',
'https://ik.imagekit.io/ikmalogic/LP%20IMA%20WACO%20/3.png'
]
});
const [generatedCode, setGeneratedCode] = useState('');
const [copied, setCopied] = useState(false);
const [activeTab, setActiveTab] = useState('code'); // 'code' or 'preview'
// Handle input changes
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
// Handle slide count change
const handleSlideCountChange = (e) => {
const count = parseInt(e.target.value) || 0;
const currentSlides = [...formData.slides];
// Resize array
if (count > currentSlides.length) {
// Add empty strings for new slots
for (let i = currentSlides.length; i < count; i++) {
currentSlides.push('');
}
} else {
// Trim array
currentSlides.length = count;
}
setFormData(prev => ({
...prev,
slideCount: count,
slides: currentSlides
}));
};
// Handle individual slide link change
const handleSlideLinkChange = (index, value) => {
const newSlides = [...formData.slides];
newSlides[index] = value;
setFormData(prev => ({ ...prev, slides: newSlides }));
};
// Generate the HTML string based on state
useEffect(() => {
const slidesHtml = formData.slides.map((url, idx) => `
`).join('');
// Convert newlines in content to for HTML rendering if not manually added
const formattedContent = formData.content.replace(/\n/g, ' ');
// Format linkText to ensure it doesn't duplicate https:// if user adds it
const displayLink = formData.linkText.replace(/^https?:\/\//, '');
const code = `