<%= turbo_frame_tag dom_id(memo) do %>
  <div data-controller="memo-card"
       class="relative bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-1">
    <%= link_to edit_memo_path(memo), class: "h-full flex flex-col", data: { turbo_frame: "_top" } do %>
      <h2 class="text-xl font-semibold text-gray-800 mb-2 line-clamp-2">
        <%= memo.content.lines.first.try(:strip) || "無題" %>
      </h2>
      <p class="text-gray-600 text-sm mb-4 line-clamp-3">
        <%= memo.content.lines[1..3].join.strip %>
      </p>
      <div class="mt-auto pt-4">
        <span class="text-gray-500 text-sm">
          <%= l memo.created_at, format: :long %>
        </span>
      </div>
    <% end %>

    <div class="absolute top-4 right-4">
      <%= button_to memo_path(memo),
          method: :delete,
          form: { data: { turbo_frame: "_top" } },
          class: "p-2 rounded-full hover:bg-gray-100 transition-colors" do %>
        <svg class="w-5 h-5 text-gray-400 hover:text-red-500"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor">
          <path stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
        </svg>
      <% end %>
    </div>
  </div>
<% end %>