import type { CSSProperties, ReactNode } from 'react';

interface CommonProps {
  children?: ReactNode;
  style?: CSSProperties;
  className?: string;
  id?: string;
  dir?: string;
}

export function Html({ children, lang = 'he', ...props }: CommonProps & { lang?: string }) {
  return (
    <html lang={lang} {...props}>
      {children}
    </html>
  );
}

export function Head({ children }: { children?: ReactNode }) {
  return <head>{children}</head>;
}

export function Body({ children, ...props }: CommonProps) {
  return <body {...props}>{children}</body>;
}

export function Container({ children, ...props }: CommonProps) {
  return <div {...props}>{children}</div>;
}

export function Section({ children, ...props }: CommonProps) {
  return <div {...props}>{children}</div>;
}

export function Text({ children, ...props }: CommonProps) {
  return <p {...props}>{children}</p>;
}

export function Link({
  children,
  href,
  ...props
}: CommonProps & { href?: string; target?: string; rel?: string }) {
  return (
    <a href={href} {...props}>
      {children}
    </a>
  );
}

export function Preview({ children }: { children?: ReactNode }) {
  return (
    <div
      style={
        {
          display: 'none',
          maxHeight: 0,
          overflow: 'hidden',
          msoHide: 'all',
        } as CSSProperties
      }
    >
      {children}
    </div>
  );
}

export function Hr(props: { style?: CSSProperties }) {
  return <hr {...props} />;
}

export function Img({
  src,
  alt,
  ...props
}: CommonProps & {
  src?: string;
  alt?: string;
  width?: number | string;
  height?: number | string;
}) {
  return <img src={src} alt={alt} {...props} />;
}
