import React from 'react';
import { Link } from 'react-router-dom';
import { Post } from '../api/posts';

interface PostListProps {
  posts: Post[];
  onDelete: (id: number) => void;
}

interface Tag {
  id: number;
  name: string;
  slug: string;
}

const PostList: React.FC<PostListProps> = ({ posts, onDelete }) => {
  return (
    <div className="space-y-4">
      {posts.map((post) => (
        <div
          key={post.id}
          className="bg-white dark:bg-gray-700 shadow rounded-lg p-6"
        >
          <div className="flex justify-between items-start">
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                {post.title}
              </h3>
              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                By {post.author.username} • {new Date(post.created_at).toLocaleDateString()}
              </p>
              <div className="mt-2">
                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                  post.status === 'published' 
                    ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100'
                    : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100'
                }`}>
                  {post.status.charAt(0).toUpperCase() + post.status.slice(1)}
                </span>
                {post.tags.map((tag) => (
                  <span key={tag.id} className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
                    {tag.name}
                  </span>
                ))}
              </div>
            </div>
            <div className="flex space-x-2">
              <Link
                to={`/posts/${post.slug}`}
                className="text-indigo-600 hover:text-indigo-900 bg-indigo-100 dark:bg-indigo-800 p-2 rounded-md dark:text-indigo-400 dark:hover:text-indigo-300 hover:underline"
              >
                View
              </Link>
              <Link
                to={`/posts/${post.slug}/edit`}
                className="text-blue-600 hover:text-blue-900 bg-blue-100 dark:bg-blue-800 p-2 rounded-md dark:text-blue-400 dark:hover:text-blue-300 hover:underline"
              >
                Edit
              </Link>
              <button
                onClick={() => onDelete(post.id)}
                className="text-red-600 hover:text-red-900 bg-red-100 dark:bg-red-800 p-2 rounded-md dark:text-red-400 dark:hover:text-red-300 hover:underline"
              >
                Delete  
              </button>
            </div>
          </div>
          <p className="mt-2 text-gray-600 dark:text-gray-300 line-clamp-2">
            {post.content}
          </p>
        </div>
      ))}
    </div>
  );
};

export default PostList;