"use client"

import React from 'react'
import { cn } from '../../utils/cn'
import { CheckCircleIcon } from '../icons-v2-generated/signs-and-symbols/check-circle-icon'
import { Tag, type TagProps } from '../ui/tag'

export interface SelectButtonProps {
  title: string
  description?: string
  selected?: boolean
  disabled?: boolean
  icon?: React.ReactNode
  image?: {
    src: string
    alt: string
  }
  tag?: string
  tagVariant?: TagProps['variant']
  onClick?: () => void
  className?: string
}

export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProps>(
  ({ title, description, selected = false, disabled = false, icon, image, tag, tagVariant = "outline", onClick, className }, ref) => {
    return (
      <button
        ref={ref}
        type="button"
        role="option"
        aria-selected={selected}
        disabled={disabled}
        onClick={onClick}
        className={cn(
          "group flex items-center md:gap-2 gap-1 h-11 md:h-16 px-3 md:px-4 py-3 rounded-[6px] border transition-colors duration-200",
          "font-body text-left w-full",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
          "disabled:pointer-events-none disabled:opacity-50",
          // Hover / active move the BACKGROUND only, like Input — the accent
          // border is reserved for the selected state, so an unselected button
          // no longer flashes "selected" under the cursor.
          selected
            ? "bg-ods-open-yellow-light border-ods-accent hover:bg-ods-open-yellow-light-hover active:bg-ods-open-yellow-light-action"
            : "bg-ods-card border-ods-border hover:bg-ods-bg-hover active:bg-ods-bg-active",
          className,
        )}
      >
        {icon && (
          <span className={cn("shrink-0 flex items-center justify-center size-4 md:size-6", selected ? "text-ods-accent" : "text-ods-text-secondary")}>
            {icon}
          </span>
        )}

        {image && (
          <span className="shrink-0 size-10 rounded overflow-hidden">
            <img
              src={image.src}
              alt={image.alt}
              className="size-full object-cover"
            />
          </span>
        )}

        <span className="flex flex-1 flex-col justify-center min-w-0 overflow-hidden">
          <span className="text-h4 text-ods-text-primary truncate" title={title}>
            {title}
          </span>
          {description && (
            <span
              className={cn(
                "text-h6 truncate hidden md:flex",
                selected ? "text-ods-accent" : "text-ods-text-secondary",
              )} title={description}>
              {description}
            </span>
          )}
        </span>

        {tag && (
          <Tag variant={tagVariant} className="shrink-0" label={tag} />
        )}

        {selected && (
          <CheckCircleIcon
            className="shrink-0 size-4 md:size-6 text-ods-accent"
          />
        )}
      </button>
    )
  },
)

SelectButton.displayName = "SelectButton"