<script>

// This version works better as a code artifact since we’re debugging syntax
import React, { useState } from ’react’;
import { Card, CardHeader, CardTitle, CardContent } from ’@/components/ui/card’;
import { Button } from ’@/components/ui/button’;
import { Input } from ’@/components/ui/input’;
import { Textarea } from ’@/components/ui/textarea’;
import { PlusCircle, Trash2, Upload, Eye, EyeOff } from ’lucide-react’;

const CVBuilder = () => {
const [sections, setSections] = useState([
{ id: ’personal’, title: ’Henkilötiedot’, visible: true, order: 0 },
{ id: ’profile’, title: ’Profiili’, visible: true, order: 1 },
{ id: ’experience’, title: ’Työkokemus’, visible: true, order: 2 },
{ id: ’education’, title: ’Koulutus’, visible: true, order: 3 },
{ id: ’licenses’, title: ’Voimassa olevat lupakortit’, visible: true, order: 4 },
{ id: ’skills’, title: ’Taidot’, visible: true, order: 5 }
]);

const [personalInfo, setPersonalInfo] = useState({
name: ”,
email: ”,
phone: ”,
address: ”,
profileImage: null,
profileText: ”
});

const [workExperience, setWorkExperience] = useState([{
company: ”,
position: ”,
period: ”,
description: ”
}]);

const [education, setEducation] = useState([{
school: ”,
degree: ”,
period: ”,
description: ”
}]);

const [licenses, setLicenses] = useState([{
name: ”,
expiryDate: ”
}]);

const [skills, setSkills] = useState([”]);

const sortedSections = […sections].sort((a, b) => a.order – b.order);

const toggleSectionVisibility = (sectionId) => {
setSections(prev => prev.map(section =>
section.id === sectionId
? { …section, visible: !section.visible }
: section
));
};

const moveSection = (sectionId, direction) => {
setSections(prev => {
const newSections = […prev];
const currentIndex = newSections.findIndex(s => s.id === sectionId);
const newIndex = currentIndex + direction;

if (newIndex >= 0 && newIndex < newSections.length) {
const temp = newSections[currentIndex].order;
newSections[currentIndex].order = newSections[newIndex].order;
newSections[newIndex].order = temp;
}

return newSections;
});
};

const SectionHeader = ({ section }) => (
<div className=”flex justify-between items-center mb-4″>
<h3 className=”text-lg font-semibold”>{section.title}</h3>
<div className=”flex gap-2″>
{section.order > 0 && (
<Button
variant=”ghost”
size=”sm”
onClick={() => moveSection(section.id, -1)}
>
↑
</Button>
)}
{section.order < sections.length – 1 && (
<Button
variant=”ghost”
size=”sm”
onClick={() => moveSection(section.id, 1)}
>
↓
</Button>
)}
<Button
variant=”ghost”
size=”sm”
onClick={() => toggleSectionVisibility(section.id)}
>
{section.visible ? <EyeOff className=”w-4 h-4″ /> : <Eye className=”w-4 h-4″ />}
</Button>
</div>
</div>
);

return (
<div className=”max-w-4xl mx-auto p-4″>
<Card>
<CardHeader>
<CardTitle>Ansioluettelo</CardTitle>
</CardHeader>
<CardContent className=”space-y-8″>
{sortedSections.map(section =>
section.visible && (
<div key={section.id} className=”space-y-4″>
<SectionHeader section={section} />
{/* Section content here */}
</div>
)
)}
</CardContent>
</Card>
</div>
);
};

export default CVBuilder;

</script>