import CMS, { useTheme } from '@staticcms/core';

import type { TemplatePreviewCardProps } from '@staticcms/core';

/**
 * The type for 'entry.data'
 */
interface Post {
  image: string;
  title: string;
  date: string;
  body: string;
  draft: boolean;
}

const PostPreviewCard = ({ entry, widgetFor }: TemplatePreviewCardProps<Post>) => {
  const theme = useTheme();

  return (
    <div style={{ width: '100%' }}>
      {widgetFor('image')}
      <div style={{ padding: '16px', width: '100%' }}>
        <div
          style={{
            display: 'flex',
            width: '100%',
            justifyContent: 'space-between',
            alignItems: 'start',
          }}
        >
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'baseline',
              gap: '8px',
            }}
          >
            <strong style={{ fontSize: '24px' }}>{entry.data?.title}</strong>
            <span style={{ fontSize: '16px' }}>{entry.data?.date}</span>
          </div>
          <div
            style={{
              backgroundColor: entry.data?.draft === true
                ? theme.info.main
                : theme.success.main,
              color: 'white',
              border: 'none',
              padding: '4px 8px',
              textAlign: 'center',
              textDecoration: 'none',
              display: 'inline-block',
              cursor: 'pointer',
              borderRadius: '4px',
            }}
          >
            {entry.data?.draft === true ? 'Draft' : 'Published'}
          </div>
        </div>
      </div>
    </div>
  );
};

CMS.registerPreviewCard('posts', PostPreviewCard, () => 240);