import { type CSSProperties, type ReactNode } from 'react';
import type { MachineRegistryItem, ThumbnailVariant } from '@/types/catalogue';
import { cn } from '@/utils/classNames';
export interface MachineThumbnailProps {
readonly machine: MachineRegistryItem;
readonly className?: string;
readonly compact?: boolean;
}
type ThumbnailStyle = CSSProperties & {
'--thumb-accent': string;
'--thumb-secondary': string;
'--thumb-bg': string;
};
function Gear({
cx,
cy,
r,
teeth
}: {
readonly cx: number;
readonly cy: number;
readonly r: number;
readonly teeth: number;
}) {
return (
{Array.from({ length: teeth }, (_, index) => (
))}
);
}
function renderVariant(variant: ThumbnailVariant, gradientId: string): ReactNode {
switch (variant) {
case 'inline-engine':
return (
<>
{[0, 1, 2, 3].map((index) => (
))}
);
case 'vee-engine':
return (
<>
{[0, 1, 2, 3].map((index) => (
))}
{[0, 1, 2, 3].map((index) => (
))}
);
case 'rotary':
return (
<>
);
case 'turbine':
return (
<>
{Array.from({ length: 12 }, (_, index) => (
))}
{[166, 190, 214, 238].map((x) => (
))}
);
case 'geartrain':
return (
<>
);
case 'pump':
return (
<>
{Array.from({ length: 6 }, (_, index) => (
))}
);
case 'mechanism':
return (
<>
);
case 'bearing':
return (
<>
{Array.from({ length: 10 }, (_, index) => {
const angle = (index / 10) * Math.PI * 2;
return (
);
})}
);
case 'brake':
return (
<>
{Array.from({ length: 8 }, (_, index) => (
))}
);
case 'electric':
return (
<>
{Array.from({ length: 12 }, (_, index) => (
))}
);
case 'fluid':
return (
<>
);
default:
return null;
}
}
export function MachineThumbnail({ className, compact = false, machine }: MachineThumbnailProps) {
const gradientId = `thumbnail-gradient-${machine.slug}`;
const style: ThumbnailStyle = {
'--thumb-accent': machine.thumbnail.accent,
'--thumb-secondary': machine.thumbnail.secondary ?? '#FFB04C',
'--thumb-bg': machine.thumbnail.background ?? 'rgb(var(--color-accent) / 0.08)'
};
return (
);
}