import type { DocsPageData, ImageRenderer } from '@bony_chops/docusaurus-og'
import { readFileSync } from 'fs'
import { join } from 'path'

// const logo = (<svg
//   id="Layer_1"
//   data-name="Layer 1"
//   xmlns="http://www.w3.org/2000/svg"
//   width="128"
//   height="128"
//   viewBox="0 0 128 128"
//   fill="#c34a36"
// >
//   <path className="cls-1" d="M76.94,65.49c.87-7.85-5.27-14.51-12.94-14.51-4.56,0-8.57,2.36-10.9,5.91h-4.55c2.36-5.11,7.17-8.87,12.95-9.71V20c0-11.05-8.95-20-20-20H5C2.24,0,0,2.24,0,5V123c0,2.76,2.24,5,5,5H41.5c11.05,0,20-8.95,20-20v-27.17c-5.78-.84-10.59-4.6-12.95-9.72h4.55c2.59,3.96,7.27,6.43,12.46,5.82,6.08-.71,10.71-5.37,11.39-11.45ZM15.3,94.39c0,1.1-.9,2-2,2s-2-.9-2-2V33.61c0-1.1,.9-2,2-2s2,.9,2,2v60.78Zm11.12,14.55c0,1.1-.9,2-2,2s-2-.9-2-2V19.06c0-1.1,.9-2,2-2s2,.9,2,2V108.94Zm37.58-39.53c-2.28,0-4.23-1.41-5.02-3.41h-21.43v28.39c0,1.1-.9,2-2,2s-2-.9-2-2V33.61c0-1.1,.9-2,2-2s2,.9,2,2v28.39h21.43c.93-2.33,3.42-3.86,6.18-3.29,2.05,.42,3.7,2.08,4.13,4.12,.73,3.5-1.92,6.58-5.29,6.58Z" />
//   <path className="cls-1" d="M123,0h-36.5c-11.05,0-20,8.95-20,20v27.18c7.55,1.12,13.5,7.2,14.4,14.82h9.55v-28.28c0-1,.68-1.92,1.66-2.08,1.25-.2,2.34,.76,2.34,1.97v60.67c0,1-.68,1.92-1.66,2.08-1.25,.2-2.34-.76-2.34-1.97v-28.39h-9.55c-.9,7.62-6.84,13.7-14.4,14.82v27.18c0,11.05,8.95,20,20,20h36.5c2.76,0,5-2.24,5-5V5c0-2.76-2.24-5-5-5Zm-17.42,108.94c0,1.1-.9,2-2,2s-2-.9-2-2V19.06c0-1.1,.9-2,2-2s2,.9,2,2V108.94Zm11.12-14.55c0,1.1-.9,2-2,2s-2-.9-2-2V33.61c0-1.1,.9-2,2-2s2,.9,2,2v60.78Z" />
// </svg>);

const DocContent = (props: { data: DocsPageData }) => {
  const { data } = props;
  return (
    <div style={{
      height: '100%',
      width: '100%',
      display: 'flex',
      textAlign: 'center',
      alignItems: 'flex-start',
      backgroundColor: "#1b1b1d",
      color: 'white',
      justifyContent: 'flex-start',
      flexDirection: 'column',
      flexWrap: 'wrap',
      padding: '3rem 3rem 0 3rem',
    }}>

      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: '30px'
      }}>
        <img src="https://docs.multi-scrobbler.app/img/icon.png" width={120} height={120} />
        <div style={{
          fontSize: 125, 
          //fontWeight: 600
          }}>Multi-Scrobbler</div>
      </div>
      <div style={{
        fontSize: 50,
        color: "#c8c8c8",
        marginTop: '1rem'
      }}
      >Listen everywhere, Scrobble anywhere</div>
      <div style={{
        marginTop: '4rem',
        display: 'flex',
        alignContent: 'flex-start',
        justifyContent: 'flex-start',
        flexDirection: 'column',
        gap: '10px',
        paddingLeft: '0.5em',
        fontSize: 75
      }}>
      <div style={{ 
        display: 'flex',
        textWrap: 'balance',
        textAlign: 'left'
         }}>{data.metadata.frontMatter?.description ?? data.metadata.title}</div>
      </div>
    </div>
  );
}

export const docs: ImageRenderer<DocsPageData> = (data, context) => [
  <DocContent data={data} />,
  {
    width: 1200,
    height: 630,
    fonts: [
      {
        name: 'Inter',
        data: readFileSync(
          // must be a STATIC (not variable) font due to a bug in satori
          // https://github.com/vercel/satori/issues/162
          // use static-font.sh to convert a variable font to static
          join(__dirname, '../../src/socialCard/AdwaitaSans-Regular-StaticSubset.ttf'),
        ),
        weight: 400,
        style: 'normal',
      },
    ],
  },
]