import { PoliciesFilters } from '@/components/policies/PoliciesFilters';
import { PoliciesHero } from '@/components/policies/PoliciesHero';
import { PolicyCreateSection } from '@/components/policies/PolicyCreateSection';
import { PolicyList } from '@/components/policies/PolicyList';
import { PolicyStatusPanels } from '@/components/policies/PolicyStatusPanels';
import type { PoliciesViewProps } from '@/components/policies/types';

export function PoliciesView({ state, actions }: PoliciesViewProps) {
  return (
    <div className="space-y-6">
      <PoliciesHero totalCount={state.totalCount} acknowledgedCount={state.acknowledgedCount} />
      <PolicyCreateSection state={state} actions={actions} />
      <PoliciesFilters state={state} actions={actions} />
      <p className="text-sm text-slate-400">
        {state.filteredPolicies.length} {state.filteredPolicies.length === 1 ? 'policy' : 'policies'} found
      </p>
      <PolicyStatusPanels
        isLoading={state.isLoading}
        queryError={state.queryError}
        mutationError={state.mutationError}
      />
      <PolicyList state={state} actions={actions} />
    </div>
  );
}
