aplp.frontend.lms/src/components/CourseCard.jsx

import { Card, Button } from '@heroui/react';
import { PencilIcon, EllipsisVerticalIcon } from '@heroicons/react/24/outline';

const statusStyles = {
  Published: 'bg-green-100 text-green-700',
  Draft: 'bg-yellow-100 text-yellow-700',
  Archived: 'bg-gray-100 text-gray-600'
};

function CourseCard({ course, image }) {
  const { code, title, description, status, lastUpdate } = course;

  const formattedDate = new Date(lastUpdate).toLocaleDateString('en-GB', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  });

  return (
    <Card
      variant="default"
      className="w-full max-w-100 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-none"
    >
      {/* Image */}
      <div className="relative h-48 overflow-hidden border-b border-gray-300">
        <img src={image} alt={title} className="h-full w-full object-cover" />

        {/* Course code */}
        <div className="absolute left-4 top-4 rounded-sm border border-gray-300 bg-white px-3 py-1.5">
          <span className="text-lg font-semibold text-gray-800">{code}</span>
        </div>
      </div>

      {/* Content */}
      <Card.Content className="px-5 py-5">
        <h3 className="mb-3 text-xl font-bold leading-tight text-gray-900">
          {title}
        </h3>

        <p className="line-clamp-2 text-md leading-8 text-gray-700">
          {description}
        </p>
      </Card.Content>

      {/* Footer */}
      <Card.Footer className="mx-5 flex items-center justify-between border-t border-gray-300 px-0 py-5">
        <div className="flex items-center gap-2">
          <span
            className={`rounded-full px-2.5 py-1 text-sm font-medium ${
              statusStyles[status] ?? 'bg-gray-100 text-gray-600'
            }`}
          >
            {status}
          </span>

          <span className="text-sm text-gray-600">Updated {formattedDate}</span>
        </div>

        <div className="flex items-center gap-1">
          <Button
            isIconOnly
            variant="ghost"
            size="sm"
            aria-label={`Edit ${title}`}
          >
            <PencilIcon className="h-5 w-5" />
          </Button>

          <Button
            isIconOnly
            variant="ghost"
            size="sm"
            aria-label={`More actions for ${title}`}
          >
            <EllipsisVerticalIcon className="h-5 w-5" />
          </Button>
        </div>
      </Card.Footer>
    </Card>
  );
}

export default CourseCard;