---
export interface Props {
	src?: string;
	alt: string;
	width?: number | string;
	height?: number | string;
	loading?: 'lazy' | 'eager';
	class?: string;
	objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
	placeholder?: 'team' | 'dashboard' | 'chart' | 'abstract' | 'office' | 'tech' | 'nature';
	rounded?: boolean;
}

// Placeholder image services
const placeholderServices = {
	team: (w: number, h: number) =>
		`https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=${w}&h=${h}&fit=crop&auto=format`,
	dashboard: (w: number, h: number) =>
		`https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=${w}&h=${h}&fit=crop&auto=format`,
	chart: (w: number, h: number) =>
		`https://images.unsplash.com/photo-1666875753105-c63a6f3bdc86?w=${w}&h=${h}&fit=crop&auto=format`,
	abstract: (w: number, h: number) =>
		`https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=${w}&h=${h}&fit=crop&auto=format`,
	office: (w: number, h: number) =>
		`https://images.unsplash.com/photo-1497366216548-37526070297c?w=${w}&h=${h}&fit=crop&auto=format`,
	tech: (w: number, h: number) =>
		`https://images.unsplash.com/photo-1518770660439-4636190af475?w=${w}&h=${h}&fit=crop&auto=format`,
	nature: (w: number, h: number) =>
		`https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=${w}&h=${h}&fit=crop&auto=format`,
};

const {
	src,
	alt,
	width = 600,
	height = 400,
	loading = 'lazy',
	class: className = '',
	objectFit = 'cover',
	placeholder,
	rounded = false,
	...rest
} = Astro.props;

// Use placeholder if no src provided
const imageSrc =
	src ||
	(placeholder && placeholderServices[placeholder]
		? placeholderServices[placeholder](Number(width), Number(height))
		: `https://via.placeholder.com/${width}x${height}/3b82f6/ffffff?text=${encodeURIComponent(alt)}`);

const objectFitClasses = {
	contain: 'object-contain',
	cover: 'object-cover',
	fill: 'object-fill',
	none: 'object-none',
	'scale-down': 'object-scale-down',
};

const roundedClass = rounded ? 'rounded-lg' : '';
const classes = `${objectFitClasses[objectFit]} ${roundedClass} ${className}`;
---

<img
	src={imageSrc}
	alt={alt}
	width={width}
	height={height}
	loading={loading}
	class={classes}
	decoding="async"
	{...rest}
/>
