import React from 'react'
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
import { t } from '$themelocalization'
import './DraftsSkeleton.scss'

const DraftsSkeleton = () => {
  return (
    <div className="drafts-skeleton" role="status" aria-busy="true" aria-label={t('General.Loading')}>
      <div className="drafts-skeleton-header">
        <div className="drafts-skeleton-title">
          <Skeleton width={150} height={32} />
        </div>
        <Skeleton width={200} height={40} />
      </div>

      <div className="drafts-skeleton-section">
        <div className="drafts-skeleton-section-header">
          <Skeleton width={180} height={24} />
          <Skeleton width={80} height={20} />
        </div>
        {[1, 2].map((i) => (
          <div key={i} className="drafts-skeleton-item">
            <Skeleton width={80} height={80} />
            <div className="drafts-skeleton-item-details">
              <Skeleton width={200} height={18} />
              <Skeleton width={150} height={14} />
              <Skeleton width={120} height={14} />
            </div>
            <div className="drafts-skeleton-item-actions">
              <Skeleton width={100} height={36} />
              <Skeleton width={60} height={20} />
            </div>
          </div>
        ))}
      </div>

      <div className="drafts-skeleton-section">
        <div className="drafts-skeleton-section-header">
          <Skeleton width={220} height={24} />
          <Skeleton width={80} height={20} />
        </div>
        {[1, 2, 3].map((i) => (
          <div key={i} className="drafts-skeleton-item">
            <Skeleton width={80} height={80} />
            <div className="drafts-skeleton-item-details">
              <Skeleton width={200} height={18} />
              <Skeleton width={120} height={14} />
            </div>
            <div className="drafts-skeleton-item-actions">
              <Skeleton width={100} height={36} />
              <Skeleton width={80} height={20} />
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default DraftsSkeleton
