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

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

interface RecentPostsTableProps {
  posts: RecentPost[];
}

export default function RecentPostsTable({ posts }: RecentPostsTableProps) {
  const getStatusStyles = (status: string) => {
    switch (status) {
      case 'published':
        return 'bg-var-success-bg text-var-success';
      case 'draft':
        return 'bg-var-surface-hover text-var-text-muted';
      default:
        return 'bg-var-warning-bg text-var-warning';
    }
  };

  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-success-bg border-b border-var-border">
        <div className="flex items-center space-x-2">
          <PenTool className="w-5 h-5 text-var-success" />
          <h3 className="text-lg font-semibold text-var-text">Recent Posts</h3>
        </div>
      </div>
      <div className="divide-y divide-var-border">
        {posts.map((post) => (
          <div key={post.id} className="px-6 py-4 hover:bg-var-surface-hover transition-colors">
            <div className="flex items-center justify-between">
              <div className="flex-1">
                <p className="text-sm font-medium text-var-text">{post.post_title}</p>
                <div className="flex items-center space-x-3 mt-1">
                  <span className="text-xs text-var-text-muted">By {post.author_name || 'Unknown'}</span>
                  <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${getStatusStyles(post.post_status)}`}>
                    {post.post_status}
                  </span>
                  <span className="text-xs text-var-text-muted">
                    {format(new Date(post.created_at), 'MMM dd, yyyy')}
                  </span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}