"use client";

import Link from "next/link";
import { formatDate, isToday } from "@/lib/utils/date";
import { MoodIcon } from "./MoodSelector";
import { TagChips } from "./TagInput";
import type { EntryWithTags } from "@/lib/types";

interface EntryRowProps {
  entry: EntryWithTags;
}

export function EntryRow({ entry }: EntryRowProps) {
  // Truncate text to one line preview
  const preview = entry.text.length > 80 ? entry.text.slice(0, 80) + "..." : entry.text;

  return (
    <Link
      href={`/entry/${entry.id}`}
      className="block p-4 bg-surface border border-border rounded-xl hover:border-muted transition-colors"
    >
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-sm text-muted">
              {isToday(entry.date) ? "Today" : formatDate(entry.date)}
            </span>
            {entry.roughDay ? (
              <span className="text-xs px-2 py-0.5 bg-red-500/20 text-red-400 rounded">
                rough day
              </span>
            ) : null}
          </div>
          <p className="text-foreground truncate">{preview}</p>
          {entry.tags.length > 0 && (
            <div className="mt-2">
              <TagChips tags={entry.tags} />
            </div>
          )}
        </div>
        {entry.mood && (
          <div className="text-xl">
            <MoodIcon mood={entry.mood} />
          </div>
        )}
      </div>
    </Link>
  );
}