<script lang="ts">
  /**
   * BackButton component - Reusable back navigation button
   *
   * @req: UR-007 - Navigate media in library
   * @req: DR-007 - Library browsing screens (navigation)
   */

  interface Props {
    onClick: () => void;
    label?: string;
    size?: "sm" | "md" | "lg";
    className?: string;
  }

  let { onClick, label = "Back", size = "md", className = "" }: Props = $props();

  const sizeMap = {
    sm: "w-5 h-5",
    md: "w-6 h-6",
    lg: "w-8 h-8",
  };
</script>

<button
  onclick={onClick}
  aria-label={label}
  class={`text-gray-400 hover:text-white transition-colors ${className}`}
>
  <svg class={`${sizeMap[size]} fill-none stroke-current`} stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
  </svg>
</button>
