import * as React from "react"

import { Accordion, AccordionItem } from "@/components/ui/accordion"

import { motion, AnimatePresence } from "framer-motion"

import { ArrowRight, Loader2 } from "lucide-react"

import { cn } from "@/lib/utils"

const initialFaqs = [

{

id: "1",

title: "What is this?",

content: "The greatest component library known to man.",

},

{

id: "2",

title: "How do I theme it?",

content: "Change the CSS variables at the top of app.css. There is no provider to wrap, no config to learn, and nothing that needs a rebuild to see.",

},

{

id: "3",

title: "What is the typeface?",

content: "Inter, a beautiful geometric sans-serif typeface.",

},

{

id: "4",

title: "Where do icons come from?",

content: "Lucide icons, a community-driven fork of Feather icons.",

}

]

export default function AccordionDemo() {

const [faqs, setFaqs] = React.useState(initialFaqs)

const [inputValue, setInputValue] = React.useState("")

const [isSubmitting, setIsSubmitting] = React.useState(false)

// Ref for accordion to trigger expanded item from demo component

// Actually we'll let the user manage it, but to auto-expand the new one,

// we can use a controlled accordion value.

const [expandedValue, setExpandedValue] = React.useState<string | null>(null)

const handleSubmit = (e: React.FormEvent) => {

e.preventDefault()

if (!inputValue.trim() || isSubmitting) return

const newId = Date.now().toString()

const question = inputValue.trim()

setIsSubmitting(true)

// Simulate API delay

setTimeout(() => {

setFaqs([...faqs, {

id: newId,

title: question,

content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."

}])

setInputValue("")

setIsSubmitting(false)

setExpandedValue(newId)

}, 1500)

}

return (

<div className="w-full h-full min-h-[600px] flex items-center justify-center p-10 bg-white dark:bg-[#1C1C1C]">

<div className="w-full max-w-xl">

<Accordion

className="w-full"

value={expandedValue}

onValueChange={setExpandedValue}

>

{faqs.map((faq) => (

<AccordionItem

key={faq.id}

value={faq.id}

title={faq.title}

>

{faq.content}

</AccordionItem>

))}

</Accordion>

{/* Input Area acting as the last pseudo-item */}

<div className="relative border-b border-black/10 dark:border-white/10 group">

<form onSubmit={handleSubmit} className="flex items-center w-full py-4">

<input

type="text"

value={inputValue}

onChange={(e) => setInputValue(e.target.value)}

disabled={isSubmitting}

placeholder="Ask anything else"

className={cn(

"w-full bg-transparent outline-none text-[14px] font-semibold text-zinc-900 dark:text-[#E2E2E2] placeholder:font-normal placeholder:text-zinc-500",

isSubmitting && "opacity-50"

)}

/>

<AnimatePresence mode="wait">

{isSubmitting ? (

<motion.div

key="loading"

initial={{ opacity: 0, scale: 0.5 }}

animate={{ opacity: 1, scale: 1 }}

exit={{ opacity: 0, scale: 0.5 }}

className="w-6 h-6 rounded-full bg-zinc-100 dark:bg-white/10 flex items-center justify-center flex-shrink-0"

>

<motion.div

className="w-1.5 h-1.5 rounded-full bg-zinc-500 dark:bg-zinc-400"

animate={{ scale: [1, 1.5, 1], opacity: [0.5, 1, 0.5] }}

transition={{ duration: 1, repeat: Infinity }}

/>

</motion.div>

) : (

<motion.button

key="submit"

initial={{ opacity: 0, scale: 0.5 }}

animate={{ opacity: 1, scale: 1 }}

exit={{ opacity: 0, scale: 0.5 }}

type="submit"

disabled={!inputValue.trim()}

className={cn(

"w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 transition-colors",

inputValue.trim()

? "bg-zinc-900 dark:bg-white/10 text-white dark:text-zinc-400 hover:text-white"

: "text-zinc-400 dark:text-zinc-600"

)}

>

<ArrowRight className="w-3 h-3" />

</motion.button>

)}

</AnimatePresence>

</form>

</div>

</div>

</div>

)

}