import React from 'react'
export interface TitleProps{
    title : string
}
export const Title = ({title} : TitleProps) => {
    return <div className="title-ui">{title}</div>
}
//subtitle
export interface SubtitleProps {
    subtitle : string
    }
export const Subtitle = ({subtitle} : SubtitleProps) => {
    return <div className="subtitle-ui">{subtitle}</div>
}

//description
export interface DescriptionProps {
    description:string
}

export const Description = ({description} : DescriptionProps) => {
    return <div className="description-ui">{description}</div>
}

//code section
export interface CodeSectionProps {
    code:string
}

export const CodeSection = ({code} : CodeSectionProps) => {
    return <pre >
        <code className="code-section">{code}</code>
    </pre>
    // return <code className="code-section">
    // &lt;{code} /&gt;
    // </code>
}
export interface SpaceProps {
    size : "small" | "medium" | "large"
}
export const Space = ({size} : SpaceProps) => {
    return <div className={`spacing ${size}`}/>
}

export interface SectionProps {
    title? : string,
    subtitle?: string,
    description?: string,
    codeExample?: string,
    componentExample?: JSX.Element,
    id?: string
}
const Section = ({title, subtitle, description, codeExample, componentExample, id} : SectionProps) => {
    
    return <div id={id} className="section">
        <Title title={title!}/>
        <Space size="small"/>
        <Subtitle subtitle={subtitle!}/>
        <Space size="small"/>
        <Description description={description!}/>
        <Space size="medium"/>
        { codeExample && <CodeSection code={codeExample!}/>}
        <Space size="large"/>
        {componentExample}
    </div>
}
export default Section