<script lang="ts">
	import { PageHeader } from '@manacore/shared-ui';
	import GenerateForm from '$lib/components/generate/GenerateForm.svelte';
	import { CheckCircle } from '@manacore/shared-icons';
</script>

<svelte:head>
	<title>Generate - Picture</title>
</svelte:head>

<div class="container mx-auto px-4 py-8">
	<PageHeader
		title="Generate Image"
		description="Create stunning AI-generated images from your text descriptions"
		size="lg"
	/>

	<div class="mx-auto max-w-3xl">
		<GenerateForm />
	</div>

	<!-- Tips Section -->
	<div class="mx-auto mt-8 max-w-3xl">
		<div class="rounded-lg border border-gray-200 bg-gray-50 p-6">
			<h3 class="mb-3 text-lg font-semibold text-gray-900">Tips for better results:</h3>
			<ul class="space-y-2 text-sm text-gray-700">
				<li class="flex items-start">
					<CheckCircle size={20} class="mr-2 mt-0.5 flex-shrink-0 text-blue-600" />
					<span
						><strong>Be specific:</strong> Include details about style, mood, colors, and composition</span
					>
				</li>
				<li class="flex items-start">
					<CheckCircle size={20} class="mr-2 mt-0.5 flex-shrink-0 text-blue-600" />
					<span
						><strong>Use descriptive words:</strong> "Vibrant sunset over mountains" is better than "sunset"</span
					>
				</li>
				<li class="flex items-start">
					<CheckCircle size={20} class="mr-2 mt-0.5 flex-shrink-0 text-blue-600" />
					<span
						><strong>Negative prompts:</strong> Use to exclude unwanted elements (e.g., "blurry, distorted,
						low quality")</span
					>
				</li>
				<li class="flex items-start">
					<CheckCircle size={20} class="mr-2 mt-0.5 flex-shrink-0 text-blue-600" />
					<span
						><strong>Try different models:</strong> Each model has unique strengths and artistic styles</span
					>
				</li>
			</ul>
		</div>
	</div>
</div>
