"use client";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Check, Pencil, Trash2 } from "lucide-react";

interface NoteItemProps {
  id: string;
  type: string; // e.g., "ملاحظه العميل" (Client Note)
  content: string;
  author: string;
  timestamp: string; // e.g., "منذ أسبوع" (A week ago)
  onEdit: () => void;
  onDelete: () => void;
  translations: {
    edit: string;
    delete: string;
    by: string; // "بواسطة" (by)
  };
  className?: string;
}

export function NoteItem({
  id,
  type,
  content,
  author,
  timestamp,
  onEdit,
  onDelete,
  translations,
  className,
}: NoteItemProps) {
  return (
    <div
      id={id}
      className={cn(
        "bg-card border border-border rounded-lg p-4 w-full",
        className,
      )}
    >
      <div className="flex flex-col gap-3">
        {/* Note type with checkmark */}
        <div className="flex items-center gap-2 ">
          <span className="text-sm font-medium text-foreground">{type}</span>
          <div className="size-5 rounded-full bg-primary flex items-center justify-center shrink-0">
            <Check className="size-3 text-white" />
          </div>
        </div>

        {/* Content */}
        <p className="text-sm text-muted-foreground  leading-relaxed">
          {content}
        </p>

        {/* Author and timestamp */}
        <div className="flex items-center gap-1 text-xs text-muted-foreground ">
          <span>{timestamp}</span>
          <span>•</span>
          <span>
            {translations.by}: {author}
          </span>
        </div>

        {/* Action buttons */}
        <div className="flex items-center gap-2  pt-1">
          {/* Edit button */}
          <Button
            variant="outline"
            size="sm"
            onClick={onEdit}
            className="h-7 px-3 gap-1.5 text-xs font-medium border-tag-border-info-light text-tag-text-info hover:bg-tag-background-info-light hover:text-tag-text-info"
          >
            <span>{translations.edit}</span>
            <Pencil className="size-3.5" />
          </Button>

          {/* Delete button */}
          <Button
            variant="outline"
            size="sm"
            onClick={onDelete}
            className="h-7 px-3 gap-1.5 text-xs font-medium border-tag-border-warning-light text-tag-text-warning hover:bg-tag-background-warning-light hover:text-tag-text-warning"
          >
            <span>{translations.delete}</span>
            <Trash2 className="size-3.5" />
          </Button>
        </div>
      </div>
    </div>
  );
}