import type JSZip from "jszip"

export const setupGuideContent = `# Setting Up Your Design System

## Installation

1. Extract the zip file to a directory of your choice
2. Open a terminal in that directory
3. Run \`npm install\` to install all dependencies
4. Run \`npm run styleguide\` to start the styleguide on http://localhost:3001

## Troubleshooting

If you encounter any issues with path aliases (@/components), try the following:

1. Make sure you're using relative imports in your own code:
   \`\`\`jsx
   // Instead of this:
   import { Button } from '@/components/ui/button'
   
   // Use this:
   import { Button } from '../components/ui/button'
   // or
   import { Button } from '../../components/ui/button'
   \`\`\`

2. If you still have issues, check that your tsconfig.json has the correct paths configuration:
   \`\`\`json
   {
     "compilerOptions": {
       "paths": {
         "@/*": ["./*"]
       }
     }
   }
   \`\`\`

3. Restart your development server after making changes

## Using Components

Import components using relative paths:

\`\`\`jsx
import { Button } from './components/ui/button'

export default function MyPage() {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  )
}
\`\`\`
`

export function addSetupGuideToZip(zip: JSZip) {
  zip.file("SETUP_GUIDE.md", setupGuideContent)
}