import { cn } from "@/lib/utils";
type Props = {
/** Direction du papier déchiré : "top" expose le haut, "bottom" expose le bas. */
side?: "top" | "bottom";
/** Couleur de remplissage (la couleur "papier" qui se révèle). Par défaut, paper. */
fill?: string;
/** Hauteur du déchirement en px. Plus haut = plus dramatique. */
height?: number;
className?: string;
};
/**
* TornEdge : séparateur SVG « edge papier déchiré ».
*
* Utilisé entre deux sections pour suggérer qu'on tourne une page d'un cahier
* d'atelier. Texture irrégulière mais subtile, donne une signature artisanale
* sans tomber dans le cliché du grunge.
*
* Le SVG est viewBox 0 0 1440 24 et stretche à la largeur du parent.
*
* Exemples :
* // sépare cette section de la suivante
* // entrée dans une section colorée
*/
export function TornEdge({
side = "bottom",
fill = "var(--color-background)",
height = 18,
className,
}: Props) {
const path =
side === "bottom"
? "M0,0 L0,12 Q40,8 80,11 T160,10 Q200,15 240,9 T320,11 Q360,7 400,12 T480,9 Q520,14 560,10 T640,12 Q680,6 720,11 T800,9 Q840,15 880,11 T960,8 Q1000,13 1040,9 T1120,12 Q1160,7 1200,10 T1280,11 Q1320,15 1360,8 T1440,11 L1440,0 Z"
: "M0,24 L0,12 Q40,17 80,14 T160,15 Q200,9 240,16 T320,14 Q360,18 400,13 T480,16 Q520,11 560,15 T640,13 Q680,18 720,14 T800,17 Q840,10 880,14 T960,17 Q1000,12 1040,16 T1120,13 Q1160,18 1200,15 T1280,14 Q1320,9 1360,17 T1440,14 L1440,24 Z";
return (
);
}