import React from 'react';
import { ArrowUpRight } from 'lucide-react';
import useRenderTracker from '../../hooks/useRenderTracker';

interface QuickActionButtonProps {
  title: string;
  description: string;
  onClick: () => void;
}

const QuickActionButton: React.FC<QuickActionButtonProps> = ({ title, description, onClick }) => {
  useRenderTracker('QuickActionButton', { title, description, onClick });

  return (
    <button
      className="group relative flex h-full w-full items-center justify-between gap-3 overflow-hidden rounded-xl border border-app-border bg-app-surface px-4 py-3 text-left transition-all duration-150 ease-out hover:border-brand/40 hover:bg-app-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
      onClick={onClick}
    >
      <span className="min-w-0">
        <span className="block truncate text-[0.9rem] font-medium text-app-text">{title}</span>
        <span className="mt-0.5 block truncate text-[0.8rem] text-app-muted">{description}</span>
      </span>
      <ArrowUpRight
        size={16}
        className="shrink-0 text-app-muted opacity-0 transition-all duration-150 group-hover:text-brand-text group-hover:opacity-100"
      />
    </button>
  );
};

export default React.memo(QuickActionButton);
