import React, { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { ScrollArea } from "@/components/ui/scroll-area"

export default function Component() {
  const [position, setPosition] = useState(50)
  const [inventory, setInventory] = useState<string[]>([])
  const [currentObjective, setCurrentObjective] = useState("Explore the Enchanted Forest")

  const moveCharacter = (direction: 'left' | 'right') => {
    setPosition(prev => Math.max(0, Math.min(100, prev + (direction === 'left' ? -10 : 10))))
  }

  const gatherIngredient = () => {
    const ingredients = ['Moonflower', 'Stardust', 'Dragon Scale', 'Phoenix Feather', 'Mermaid Tear']
    const newIngredient = ingredients[Math.floor(Math.random() * ingredients.length)]
    setInventory(prev => [...prev, newIngredient])
  }

  return (
    <div className="w-full max-w-4xl mx-auto p-4 bg-gradient-to-b from-purple-600 to-blue-800 rounded-lg shadow-lg">
      <h1 className="text-2xl font-bold text-white mb-4">Mystic Realms: The Alchemist's Journey</h1>
      
      {/* Game Area */}
      <div className="relative h-60 bg-gradient-to-r from-green-400 to-blue-500 rounded-lg mb-4 overflow-hidden">
        <div 
          className="absolute bottom-0 w-10 h-20 bg-red-500"
          style={{ left: `${position}%`, transition: 'left 0.3s ease-out' }}
        />
      </div>
      
      {/* Controls */}
      <div className="flex justify-center space-x-4 mb-4">
        <Button onClick={() => moveCharacter('left')}>Move Left</Button>
        <Button onClick={gatherIngredient}>Gather Ingredient</Button>
        <Button onClick={() => moveCharacter('right')}>Move Right</Button>
      </div>
      
      {/* Inventory */}
      <div className="bg-white bg-opacity-20 rounded-lg p-4 mb-4">
        <h2 className="text-xl font-semibold text-white mb-2">Inventory</h2>
        <ScrollArea className="h-20">
          <ul className="space-y-1">
            {inventory.map((item, index) => (
              <li key={index} className="text-white">{item}</li>
            ))}
          </ul>
        </ScrollArea>
      </div>
      
      {/* Objective */}
      <div className="bg-white bg-opacity-20 rounded-lg p-4">
        <h2 className="text-xl font-semibold text-white mb-2">Current Objective</h2>
        <p className="text-white">{currentObjective}</p>
        <Progress value={33} className="mt-2" />
      </div>
    </div>
  )
}