'use client';

import React from 'react';
import { useRouter } from 'next/navigation';
import { useVideos } from '../../../../hooks/useVideos';
import VideoForm from '../../../../components/admin/VideoForm';
import Link from 'next/link';

export default function CreateVideoPage() {
  const router = useRouter();
  const { createVideo } = useVideos();
  
  return (
    <div>
      <div className="sm:flex sm:items-center sm:justify-between mb-6">
        <div>
          <h1 className="admin-page-header-title">Add New Video</h1>
          <p className="mt-1 text-sm admin-text-light">
            Upload a video file along with optional thumbnail, subtitles, and transcript files.
            The video duration will be automatically detected, and a thumbnail will be generated
            at the 10-second mark if you don't provide one.
          </p>
        </div>
        <div className="mt-4 sm:mt-0">
          <Link
            href="/admin/videos"
            className="admin-btn-secondary inline-flex items-center"
          >
            <svg className="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            Back to Videos
          </Link>
        </div>
      </div>

      <VideoForm onSubmit={createVideo} isEdit={false} />
    </div>
  );
}