Generated Answer

export default function GeneratedAnswerExample() {
  const sampleContent = `# React Best Practices

## Component Structure
- Use functional components with hooks
- Keep components small and focused
- Implement proper prop validation

## State Management
- Use useState for local state
- Consider Context API for shared state
- Implement proper error boundaries

## Performance Optimization
- Use React.memo for expensive components
- Implement proper key props in lists
- Avoid unnecessary re-renders

\`\`\`jsx
const MyComponent = ({ data }) => {
  const [state, setState] = useState(null)
  
  useEffect(() => {
    // Handle side effects
  }, [data])
  
  return <div>{data}</div>
}
\`\`\``

  const handleEndAnimation = () => {
    console.log('Text animation ended')
  }

  const handleComplete = () => {
    console.log('Answer generation completed')
  }

  return (
    <GeneratedAnswer
      content={sampleContent}
      timestamp="1:23"
      isLoading={false}
      textSpeed={30}
      markdownMode={true}
      hideControls={false}
      onEndAnimation={handleEndAnimation}
      onComplete={handleComplete}
      className="w-full max-w-2xl"
    />
  )
}

type GeneratedAnswerProps = {
  className?: string
  content?: string
  timestamp?: string
  isLoading?: boolean
  LoaderComponent?: React.ReactNode
  onEndAnimation?: () => void
  onComplete?: () => void
  textSpeed?: number
  markdownMode?: boolean
  hideControls?: boolean
}