import React from 'react';

/**
 * Renders the Page Content icon
 * @param {React.SVGProps<SVGSVGElement>} props - The props for the component
 * @returns {JSX.Element} - The component
 * @example
 * <PageContent />
 * @example
 * <PageContent height={24} width={24} />
 * @example
 * <PageContent className="custom-class" />
 */
export default function PageContent({
  isDecorative,
  ...props
}: { isDecorative: boolean } & React.SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
      <path
        fill="#CCE9ED"
        stroke="#73C0CB"
        d="M20 1.5A1.5 1.5 0 0 1 21.5 3v18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 21V3A1.5 1.5 0 0 1 4 1.5h16Z"
      />
      <rect width="9" height="4" x="5" y="5" fill="#057E91" rx="1" />
      <rect width="9" height="3" x="5" y="10" fill="#057E91" rx="1" />
      <rect width="9" height="3" x="5" y="14" fill="#057E91" rx="1" />
      <rect width="3" height="2" x="16" y="5" fill="#057E91" rx="1" />
      <rect width="3" height="2" x="16" y="8" fill="#057E91" rx="1" />
      <rect width="3" height="2" x="16" y="11" fill="#057E91" rx="1" />

      {!isDecorative && <title>page content icon</title>}
    </svg>
  );
}