'use client';

import { CheckCircle2, X, Trash2, AlertCircle, Loader2 } from 'lucide-react';

import * as CompactButton from '@/components/ui/compact-button';
import * as FileFormatIcon from '@/components/ui/file-format-icon';
import * as LinkButton from '@/components/ui/link-button';
import * as ProgressBar from '@/components/ui/progress-bar';

export default function FileUploadStatus() {
  return (
    <div className='flex w-full max-w-100 flex-col gap-6'>
      <div className='bg-bg-white-0 ring-stroke-soft-200 flex w-full flex-col gap-4 rounded-xl p-4 pl-3.5 ring-1 ring-inset'>
        <div className='flex gap-3'>
          <FileFormatIcon.Root format='PDF' color='red' />
          <div className='flex-1 space-y-1'>
            <div className='text-label-sm text-text-strong-950'>my-cv.pdf</div>
            <div className='flex items-center gap-1'>
              <span className='text-paragraph-xs text-text-sub-600'>
                0 KB of 120 KB
              </span>
              <span className='text-paragraph-xs text-text-sub-600'>∙</span>
              <Loader2 className='text-primary-base size-4 shrink-0 animate-spin' />
              <span className='text-paragraph-xs text-text-strong-950'>
                Uploading...
              </span>
            </div>
          </div>
          <CompactButton.Root variant='ghost' size='large'>
            <CompactButton.Icon as={X} />
          </CompactButton.Root>
        </div>
        <ProgressBar.Root value={10} />
      </div>

      <div className='bg-bg-white-0 ring-stroke-soft-200 w-full rounded-xl p-4 pl-3.5 ring-1 ring-inset'>
        <div className='flex gap-3'>
          <FileFormatIcon.Root format='PDF' color='red' />
          <div className='flex-1 space-y-1'>
            <div className='text-label-sm text-text-strong-950'>my-cv.pdf</div>
            <div className='flex items-center gap-1'>
              <span className='text-paragraph-xs text-text-sub-600'>
                0 KB of 120 KB
              </span>
              <span className='text-paragraph-xs text-text-sub-600'>∙</span>
              <CheckCircle2 className='text-success-base size-4 shrink-0' />
              <span className='text-paragraph-xs text-text-strong-950'>
                Completed
              </span>
            </div>
          </div>
          <CompactButton.Root variant='ghost' size='large'>
            <CompactButton.Icon as={Trash2} />
          </CompactButton.Root>
        </div>
      </div>

      <div className='bg-bg-white-0 ring-error-base w-full rounded-xl p-4 pl-3.5 ring-1 ring-inset'>
        <div className='flex gap-3'>
          <FileFormatIcon.Root format='PDF' color='red' />
          <div className='flex flex-1 flex-col items-start gap-2'>
            <div className='space-y-1'>
              <div className='text-label-sm text-text-strong-950'>
                my-cv.pdf
              </div>
              <div className='flex items-center gap-1'>
                <span className='text-paragraph-xs text-text-sub-600'>
                  0 KB of 120 KB
                </span>
                <span className='text-paragraph-xs text-text-sub-600'>∙</span>
                <AlertCircle className='text-error-base size-4 shrink-0' />
                <span className='text-paragraph-xs text-text-strong-950'>
                  Failed
                </span>
              </div>
            </div>
            <LinkButton.Root variant='error' size='medium' underline>
              Try Again
            </LinkButton.Root>
          </div>
          <CompactButton.Root
            variant='modifiable'
            size='large'
            className='text-error-base'
          >
            <CompactButton.Icon as={Trash2} />
          </CompactButton.Root>
        </div>
      </div>
    </div>
  );
}