import { ShellCommandForm } from "@/components/command-form";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { UpdateButton } from "@/components/update-button";
import { FileText, Terminal } from "lucide-react";

interface FormSubmitTemplateProps {
  title: string;
  description: string;
  isLoading?: boolean;
  children: React.ReactNode;
  onSubmit?: () => void;
  submitLoading?: boolean;
}

export function FormSubmitTemplate({
  title,
  description,
  isLoading,
  children,
  onSubmit,
  submitLoading,
}: FormSubmitTemplateProps) {
  return (
    <div className="w-full px-6 space-y-4">
      <div>
        <h1 className="text-3xl font-bold">{title}</h1>
        <p className="text-muted-foreground mt-2">{description}</p>
      </div>

      <Card className="w-full">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Terminal className="h-5 w-5" /> Gửi lệnh CMD
          </CardTitle>
          <CardDescription>Nhập và gửi lệnh xuống thiết bị</CardDescription>
        </CardHeader>
        <CardContent>{children}</CardContent>
        {onSubmit && (
          <CardFooter>
            <UpdateButton onClick={onSubmit} loading={submitLoading} />
          </CardFooter>
        )}
      </Card>
    </div>
  );
}