import React, { useEffect, useRef } from 'react'; import { X } from 'lucide-react'; import { StyleOption } from '../types'; interface StylePreviewModalProps { style: StyleOption; onClose: () => void; } const SAMPLE_CONTENT = `

The Art of Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

1. Visual Hierarchy

Visual hierarchy enables the reader to understand the importance of different sections. By using size, weight, and color, we guide the eye through the document in a logical flow.

"Design is not just what it looks like and feels like. Design is how it works."

2. Key Elements

Good typography is invisible. It should not distract the reader but rather enhance the reading experience, ensuring the message is delivered clearly and effectively.

`; export const StylePreviewModal: React.FC = ({ style, onClose }) => { const iframeRef = useRef(null); useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', handleEscape); return () => window.removeEventListener('keydown', handleEscape); }, [onClose]); useEffect(() => { if (!iframeRef.current) return; const doc = iframeRef.current.contentDocument; if (doc) { const html = ` ${SAMPLE_CONTENT} `; doc.open(); doc.write(html); doc.close(); } }, [style]); return (
{ // Close if clicking the background overlay directly if (e.target === e.currentTarget) { onClose(); } }} >
{/* Header */}

{style.name}

{style.description}

{/* Content */}