import { Plus } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { PolicyForm } from '@/components/policies/PolicyForm';
import type { PoliciesViewProps } from '@/components/policies/types';

export function PolicyCreateSection({ state, actions }: PoliciesViewProps) {
  if (!state.canManage) {
    return null;
  }

  if (!state.showCreateForm) {
    return (
      <Button
        type="button"
        onClick={() => actions.setShowCreateForm(true)}
        leadingIcon={<Plus size={16} />}
        className="flex items-center gap-2 px-5 py-3 bg-gradient-to-r from-violet-600 to-indigo-600 text-white rounded-xl font-medium text-sm hover:shadow-lg hover:shadow-violet-500/25 transition-all"
      >
        Add New Policy
      </Button>
    );
  }

  return (
    <PolicyForm
      title="Add New Policy"
      draft={state.createDraft}
      submitLabel="Save Policy"
      submitting={state.isCreating}
      disabled={state.isMutating}
      onChange={actions.updateCreateDraft}
      onSubmit={() => {
        void actions.submitCreatePolicy();
      }}
      onCancel={() => actions.setShowCreateForm(false)}
    />
  );
}
