'use client';
import { useId } from 'react';
type Props = {
mockup: string;
color: string;
};
const STROKE = '#17181C';
/**
* Shading is done as color-independent overlays (white/black gradients with
* blend modes) on top of the flat garment fill, so any hex color still reads
* as "lit from one side" without us having to compute per-color shades.
*/
function Shading({ clipId, variant }: { clipId: string; variant: 'garment' | 'round' }) {
const hi = `${clipId}-hi`;
const sh = `${clipId}-sh`;
return (
<>
);
}
function TShirt({ color }: { color: string }) {
const id = useId();
const clipId = `tee-${id}`;
const body =
'M170 92 L112 128 L68 192 L118 232 L150 204 L150 424 C150 434 158 442 168 442 L332 442 C342 442 350 434 350 424 L350 204 L382 232 L432 192 L388 128 L330 92 C330 92 316 122 250 122 C184 122 170 92 170 92 Z';
return (
);
}
function Hoodie({ color }: { color: string }) {
const id = useId();
const clipId = `hoodie-${id}`;
const body =
'M178 100 L118 138 L78 198 L128 238 L158 212 L158 250 C 132 262 120 288 120 322 L120 432 C120 440 126 446 134 446 L366 446 C374 446 380 440 380 432 L380 322 C380 288 368 262 342 250 L342 212 L372 238 L422 198 L382 138 L322 100 C322 100 304 124 250 124 C196 124 178 100 178 100 Z';
return (
);
}
function Mug({ color }: { color: string }) {
const id = useId();
const clipId = `mug-${id}`;
const body = 'M142 158 L358 158 L347 402 C347 418 332 428 316 428 L184 428 C168 428 153 418 153 402 Z';
return (
);
}
function Tumbler({ color }: { color: string }) {
const id = useId();
const clipId = `tumbler-${id}`;
const body = 'M188 148 L312 148 L296 424 C296 438 282 448 267 448 L233 448 C218 448 204 438 204 424 Z';
return (
);
}
function PhoneCase({ color }: { color: string }) {
const id = useId();
const clipId = `case-${id}`;
return (
);
}
export default function ProductMockup({ mockup, color }: Props) {
switch (mockup) {
case 'hoodie':
return ;
case 'mug':
return ;
case 'tumbler':
return ;
case 'phonecase':
return ;
case 'tshirt':
default:
return ;
}
}