import { FC, ReactNode } from 'react';

interface AdvertContent {
  format: ReactNode;
  price: string;
}

interface Props {
  className?: string;
  advertHeader: string[];
  advertContents: AdvertContent[];
}

const AdvertInfoBlock: FC<Props> = ({
  className,
  advertHeader,
  advertContents
}) => {
  return (
    <div className={className}>
      <div className='flex items-center justify-between bg-neutral-900 p-6 text-xl font-bold text-white'>
        {advertHeader.map((header: string, idx: number) => (
          <span key={idx}>{header}</span>
        ))}
      </div>
      <div className='bg-neutral-100'>
        {advertContents.map((content: AdvertContent, idx: number) => (
          <div
            key={idx}
            className='grid w-full grid-cols-[1fr_120px] border-b border-white p-6'
          >
            <span>{content.format}</span>
            <span className='text-right text-xl font-bold text-neutral-500'>
              {content.price}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default AdvertInfoBlock;