// app/components/admin/dashboard/RecentPagesTable.tsx
'use client';

import { BookOpen } from 'lucide-react';
import { format } from 'date-fns';
import { RecentPage } from '@/types/dashboard';

interface RecentPagesTableProps {
  pages: RecentPage[];
}

export default function RecentPagesTable({ pages }: RecentPagesTableProps) {
  return (
    <div className="bg-var-surface rounded-xl shadow-var-card border border-var-border overflow-hidden">
      <div className="px-6 py-4 bg-var-warning-bg border-b border-var-border">
        <div className="flex items-center space-x-2">
          <BookOpen className="w-5 h-5 text-var-warning" />
          <h3 className="text-lg font-semibold text-var-text">Recent Pages</h3>
        </div>
      </div>
      <div className="divide-y divide-var-border">
        {pages.map((page) => (
          <div key={page.id} className="px-6 py-4 hover:bg-var-surface-hover transition-colors">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-var-text">{page.page_title}</p>
                <p className="text-xs text-var-text-muted mt-1">/{page.page_slug}</p>
              </div>
              <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                page.is_active ? 'bg-var-success-bg text-var-success' : 'bg-var-surface-hover text-var-text-muted'
              }`}>
                {page.is_active ? 'Active' : 'Inactive'}
              </span>
            </div>
            <p className="text-xs text-var-text-muted mt-2">
              Updated {format(new Date(page.updated_at), 'MMM dd, yyyy')}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}