"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Button } from "./ui/button"
import { Input } from "./ui/input"

interface DynamicComponentProps {
  initialData?: string
  onSubmit?: (data: string) => void
}

export function DynamicComponent({ initialData = "", onSubmit }: DynamicComponentProps) {
  const [data, setData] = useState(initialData)

  useEffect(() => {
    // You can perform any side effects here
    console.log("Component mounted or data changed:", data)
  }, [data])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (onSubmit) {
      onSubmit(data)
    }
  }

  return (
    <div className="p-4 border rounded-lg shadow-sm">
      <h2 className="text-lg font-semibold mb-4">Dynamic Component</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <Input type="text" value={data} onChange={(e) => setData(e.target.value)} placeholder="Enter data" />
        <Button type="submit">Submit</Button>
      </form>
      <div className="mt-4">
        <p>Current data: {data}</p>
      </div>
    </div>
  )
}