{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "exercise",
  "type": "registry:component",
  "title": "Exercise",
  "description": "Interactive exercise block for learning content.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/exercise/exercise.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { Check, Dumbbell, Eye, EyeOff } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Button } from \"@vllnt/ui\";\n\nconst difficultyConfig = {\n  easy: { className: \"text-green-600 dark:text-green-400\", label: \"Easy\" },\n  hard: { className: \"text-red-600 dark:text-red-400\", label: \"Hard\" },\n  medium: { className: \"text-amber-600 dark:text-amber-400\", label: \"Medium\" },\n};\n\ntype HeaderProps = {\n  completed: boolean;\n  config: { className: string; label: string };\n  onToggle: () => void;\n  title: string;\n};\n\nfunction ExerciseHeader({ completed, config, onToggle, title }: HeaderProps) {\n  return (\n    <div className=\"flex items-start justify-between gap-4 mb-4\">\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex size-10 items-center justify-center rounded-full bg-primary/10\">\n          <Dumbbell className=\"size-5 text-primary\" />\n        </div>\n        <div>\n          <h4 className=\"font-semibold text-foreground\">{title}</h4>\n          <span className={cn(\"text-xs font-medium\", config.className)}>\n            {config.label}\n          </span>\n        </div>\n      </div>\n      <Button\n        className={cn(completed && \"bg-green-500 hover:bg-green-600\")}\n        onClick={onToggle}\n        size=\"sm\"\n        variant={completed ? \"default\" : \"outline\"}\n      >\n        {completed ? (\n          <>\n            <Check className=\"size-4 mr-1\" />\n            Done\n          </>\n        ) : (\n          \"Mark Complete\"\n        )}\n      </Button>\n    </div>\n  );\n}\n\ntype HintProps = { hint: string; onShow: () => void; showHint: boolean };\n\nfunction ExerciseHint({ hint, onShow, showHint }: HintProps) {\n  return (\n    <div className=\"mb-4\">\n      {showHint ? (\n        <div className=\"p-3 rounded bg-muted/50 text-sm\">\n          <p className=\"font-medium text-xs uppercase tracking-wider text-muted-foreground mb-1\">\n            Hint\n          </p>\n          <p className=\"text-muted-foreground italic\">{hint}</p>\n        </div>\n      ) : (\n        <button\n          className=\"text-sm text-primary hover:underline\"\n          onClick={onShow}\n          type=\"button\"\n        >\n          Need a hint?\n        </button>\n      )}\n    </div>\n  );\n}\n\ntype SolutionProps = {\n  onToggle: () => void;\n  showSolution: boolean;\n  solution: ReactNode;\n};\n\nfunction ExerciseSolution({ onToggle, showSolution, solution }: SolutionProps) {\n  return (\n    <div>\n      <Button className=\"mb-3\" onClick={onToggle} size=\"sm\" variant=\"outline\">\n        {showSolution ? (\n          <>\n            <EyeOff className=\"size-4 mr-1\" />\n            Hide Solution\n          </>\n        ) : (\n          <>\n            <Eye className=\"size-4 mr-1\" />\n            Show Solution\n          </>\n        )}\n      </Button>\n      {showSolution ? (\n        <div className=\"p-4 rounded-lg bg-card border text-sm [&>pre]:my-0\">\n          <p className=\"font-medium text-xs uppercase tracking-wider text-muted-foreground mb-2\">\n            Solution\n          </p>\n          {solution}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport type ExerciseProps = {\n  children: ReactNode;\n  difficulty?: \"easy\" | \"hard\" | \"medium\";\n  hint?: string;\n  solution?: ReactNode;\n  title: string;\n};\n\nexport function Exercise({\n  children,\n  difficulty = \"medium\",\n  hint,\n  solution,\n  title,\n}: ExerciseProps) {\n  const [showSolution, setShowSolution] = useState(false);\n  const [showHint, setShowHint] = useState(false);\n  const [completed, setCompleted] = useState(false);\n\n  return (\n    <div className=\"my-6 rounded-lg border-2 border-dashed border-primary/30 bg-primary/5 p-6\">\n      <ExerciseHeader\n        completed={completed}\n        config={difficultyConfig[difficulty]}\n        onToggle={() => {\n          setCompleted(!completed);\n        }}\n        title={title}\n      />\n      <div className=\"text-sm text-muted-foreground mb-4 [&>p]:mb-2 [&>ul]:mb-2\">\n        {children}\n      </div>\n      {hint ? (\n        <ExerciseHint\n          hint={hint}\n          onShow={() => {\n            setShowHint(true);\n          }}\n          showHint={showHint}\n        />\n      ) : null}\n      {solution ? (\n        <ExerciseSolution\n          onToggle={() => {\n            setShowSolution(!showSolution);\n          }}\n          showSolution={showSolution}\n          solution={solution}\n        />\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}