---
const {
  slug,
  title,
  type,
  description,
  tags = [],
  created_at,
  updated_at,
  notes,
} = Astro.props;

const formatDate = (dateStr: string | undefined) => {
  if (!dateStr) return "–";
  const date = new Date(dateStr);
  return isNaN(date.getTime())
    ? "Invalid date"
    : date.toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
        year: 'numeric',
      });
};
---

<div class="border border-gray-400 rounded p-4 bg-gray-700 text-gray-200 shadow-sm flex flex-col gap-2 min-h-[12rem]">
  <div class="flex items-center justify-between">
    <h3 class="text-lg font-semibold">{title}</h3>
    <span class={`text-xs font-medium px-2 py-1 rounded ${
      type === 'System' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'
    }`}>
      {type}
    </span>
  </div>

  <p class="text-sm">{notes}</p>

  <div class="flex flex-wrap gap-2 mt-2">
    {tags.map((tag: string) => (
      <span class="text-xs bg-gray-200 text-gray-800 px-2 py-1 pt-0 rounded">{tag}</span>
    ))}
  </div>

  <details name="prompt-details">
    <summary class="cursor-pointer font-semibold mt-2">View Details</summary>
    <div class="text-md border-t mt-2 pt-2">
      <h3 class="text-lg font-semibold">Prompt</h3>
      <p class="my-2">{description}</p>
      <hr class="my-2" />
      <p class="text-sm"><strong>Created:</strong> {formatDate(created_at)} &bull; <strong>Updated:</strong> {formatDate(updated_at)}</p>
    </div>
  </details>
</div>