'use client';
import React from 'react';
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { TabsContent } from '@/components/ui/tabs';

const CourseActionFormTabContent :React.FC = () => {
    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        // Handle form submission
        const formData = new FormData(e.currentTarget);
        console.log('Form submitted:', Object.fromEntries(formData));
    };

    return (
            <Card>
                <CardHeader>
                    <CardTitle className="text-2xl">Create New Course</CardTitle>
                </CardHeader>
                <CardContent>
                    <form onSubmit={handleSubmit} className="space-y-6">
                        {/* Course Title */}
                        <div className="space-y-2">
                            <Label htmlFor="title">Course Title</Label>
                            <Input
                                id="title"
                                name="title"
                                placeholder="Enter course title"
                                required
                                className="w-full"
                            />
                        </div>

                        {/* Course Category */}
                        <div className="space-y-2">
                            <Label htmlFor="category">Category</Label>
                            <Select name="category">
                                <SelectTrigger>
                                    <SelectValue placeholder="Select a category" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="programming">Programming</SelectItem>
                                    <SelectItem value="design">Design</SelectItem>
                                    <SelectItem value="business">Business</SelectItem>
                                    <SelectItem value="marketing">Marketing</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        {/* Course Description */}
                        <div className="space-y-2">
                            <Label htmlFor="description">Description</Label>
                            <Textarea
                                id="description"
                                name="description"
                                placeholder="Enter course description"
                                className="min-h-32"
                            />
                        </div>

                        {/* Estimated Learning Hours */}
                        <div className="space-y-2">
                            <Label htmlFor="estimatedHours">Estimated Learning Hours</Label>
                            <Input
                                id="estimatedHours"
                                name="estimatedHours"
                                type="number"
                                min="1"
                                placeholder="Enter estimated hours"
                            />
                        </div>

                        {/* Required Pages */}
                        <div className="space-y-2">
                            <Label htmlFor="requiredPages">Required Pages</Label>
                            <Input
                                id="requiredPages"
                                name="requiredPages"
                                type="number"
                                min="1"
                                placeholder="Enter number of required pages"
                            />
                        </div>

                        {/* PDF Upload */}
                        <div className="space-y-2">
                            <Label htmlFor="coursePdf">Course PDF</Label>
                            <Input
                                id="coursePdf"
                                name="coursePdf"
                                type="file"
                                accept=".pdf"
                                className="cursor-pointer"
                            />
                        </div>

                        {/* Submit Button */}
                        <div className="mx-auto w-fit">
                            <Button className="mt-6 w-full md:min-w-[600px] min-w-[300px]  bg-purple-700">Save Changes</Button>
                        </div>
                    </form>
                </CardContent>
            </Card>
    );
};

export default CourseActionFormTabContent;