// app/components/admin/CommonComponents/FormCard.tsx
import Link from 'next/link';
import React from 'react';

interface FormCardProps {
  title: string;
  description?: string;
  backHref: string;
  backLabel?: string;
  children: React.ReactNode;
  className?: string;
}

export default function FormCard({
  title,
  description,
  backHref,
  backLabel = 'Back',
  children,
  className = '',
}: FormCardProps) {
  return (
    <div className={`max-w-6xl mx-auto ${className}`}>
      <div className="bg-var-surface rounded-2xl shadow-var-card border border-var-border overflow-hidden">
        {/* Header */}
        <div className="px-6 py-4 border-b border-var-border bg-var-surface-hover">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-xl font-semibold text-var-text">{title}</h2>
              {description && (
                <p className="text-sm text-var-text-muted mt-1">{description}</p>
              )}
            </div>

            <Link
              href={backHref}
              className="inline-flex items-center px-4 py-2 text-sm font-medium text-var-text-secondary bg-var-surface border border-var-border rounded-xl hover:bg-var-surface-hover transition-colors duration-200"
            >
              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
              </svg>
              {backLabel}
            </Link>
          </div>
        </div>

        {/* Body */}
        <div className="p-6">{children}</div>
      </div>
    </div>
  );
}