import { HTMLAttributes } from 'react';
import { twMerge } from 'tailwind-merge';

export const Wrapper = (props: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={twMerge('flex flex-col items-stretch gap-4', props.className)}
  />
);

export const TitleLine = (props: HTMLAttributes<HTMLHeadingElement>) => (
  <h3
    {...props}
    className={twMerge('px-4 font-serif text-2xl', props.className)}
  >
    {props.children}
  </h3>
);

export const MainContent = (props: HTMLAttributes<HTMLDivElement>) => (
  <div {...props} className={twMerge('h-[500px] px-4', props.className)} />
);

export const Footer = (props: HTMLAttributes<HTMLDivElement>) => (
  <div
    {...props}
    className={twMerge(
      'flex h-4 items-center justify-between px-4',
      props.className
    )}
  />
);