---
// Port of preview/pages/buttons.html (layout: default)
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Icon from '@shared/components/Icon.astro';
import Button from '@shared/components/Button.astro';
import site from '@data/site.json';

type ColorEntry = [string, { title: string; icon?: string }];

// Liquid iterates the site.json objects as [key, value] pairs.
// themeColors/colors entries have no icon — ui/icon.html renders nothing there.
const themeColors = Object.entries(site.themeColors) as ColorEntry[];
const colors = Object.entries(site.colors) as ColorEntry[];
const socialColors = Object.entries(site.socialColors) as ColorEntry[];

const actions = ['edit', 'copy', 'settings', 'clipboard', 'x'];
const sizes = ['sm', 'md', 'lg', 'xl'];
---

<DefaultLayout title="Buttons" pageHeader="Buttons" pageMenu="base.buttons">
	<div class="row row-cards">
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Standard Buttons</h3>
				</div>
				<div class="card-body">
					<div class="btn-list">
						{
							themeColors.map(([name, color]) => (
								<a class={`btn btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
							))
						}
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Outline Buttons</h3>
				</div>
				<div class="card-body">
					<div class="btn-list">
						{
							themeColors.map(([name, color]) => (
								<a class={`btn btn-outline btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
							))
						}
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Ghost Buttons</h3>
				</div>
				<div class="card-body">
					<div class="btn-list">
						{
							themeColors.map(([name, color]) => (
								<a class={`btn btn-ghost btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
							))
						}
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Square Buttons</h3>
				</div>
				<div class="card-body">
					<div class="btn-list">
						{
							themeColors.map(([name, color]) => (
								<a class={`btn btn-square btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
							))
						}
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Pill Buttons</h3>
				</div>
				<div class="card-body">
					<div class="btn-list">
						{
							themeColors.map(([name, color]) => (
								<a class={`btn btn-pill btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
							))
						}
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Extra colors</h3>
				</div>
				<div class="card-body">
					<div class="btn-list">
						{
							colors.map(([name, color]) => (
								<a class={`btn btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
							))
						}
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Icon buttons</h3>
				</div>
				<div class="card-body">
					<div class="btn-list">
						{
							socialColors.map(([name, app]) => (
								<a class={`btn btn-icon btn-${name}`}>{app.icon && <Icon name={app.icon} />}</a>
							))
						}
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Social colors</h3>
				</div>
				<div class="card-body">
					<div class="btn-list">
						{
							socialColors.map(([name, app]) => (
								<a class={`btn btn-${name}`}>{app.icon && <Icon name={app.icon} />} {app.title}</a>
							))
						}
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Action buttons</h3>
				</div>
				<div class="card-body">
					<div class="btn-actions">
						{
							actions.map((action) => (
								<a class="btn btn-action">
									<Icon name={action} />
								</a>
							))
						}
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Buttons with icon</h3>
				</div>
				<div class="card-body">
					<div class="btn-list">
						<a class="btn btn-animate-icon">Save <Icon name="arrow-right" class="icon-end" /></a>
						<a class="btn btn-animate-icon btn-animate-icon-rotate"><Icon name="plus" /> Add</a>
						<a class="btn btn-animate-icon btn-animate-icon-shake"><Icon name="bell" /> Notifications</a>
						<a class="btn btn-animate-icon btn-animate-icon-rotate"><Icon name="settings" /> Settings</a>
						<a class="btn btn-animate-icon btn-animate-icon-pulse"><Icon name="heart" /> Love</a>
						<a class="btn btn-animate-icon btn-animate-icon-rotate"><Icon name="x" /> Close</a>
						<a class="btn btn-animate-icon btn-animate-icon-tada"><Icon name="check" /> Confirm</a>
						<a class="btn btn-animate-icon">Next <Icon name="chevron-right" class="icon-end" /></a>
						<a class="btn btn-animate-icon btn-animate-icon-move-start"><Icon name="chevron-left" /> Previous</a>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Buttons size</h3>
				</div>
				<div class="card-body">
					<div class="space-y">
						{
							sizes.map((size) => (
								<div class="btn-list">
									<Button size={size} text="Button" />
									<Button size={size} icon="star" iconOnly />
									<Button size={size} icon="star" text="Button" />
									<Button size={size} iconEnd="star" text="Button" />
								</div>
							))
						}
					</div>
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>