"use client";

import { useState } from "react";

interface LoginNotificationProps {
  browser?: string;
  date?: string;
}

export default function LoginNotification({
  browser = "Chrome on Windows",
  date = new Date().toLocaleDateString(undefined, {
    day: "numeric",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  }),
}: LoginNotificationProps) {
  const [dismissed, setDismissed] = useState(false);

  if (dismissed) return null;

  return (
    <div className="bg-gold/10 border border-gold/30 rounded-lg p-3 flex items-center justify-between gap-4">
      <div className="flex items-center gap-3">
        <svg className="w-5 h-5 text-gold shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <p className="text-sm text-text">
          New login detected from <span className="font-semibold text-gold">{browser}</span> on{" "}
          <span className="font-semibold">{date}</span>
        </p>
      </div>
      <button
        onClick={() => setDismissed(true)}
        className="text-text-muted hover:text-text transition-colors shrink-0"
        aria-label="Dismiss"
      >
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  );
}