'use client'

import React from 'react'
import { useTenantSelection } from '@payloadcms/plugin-multi-tenant/client'

/**
 * Navigation Link zum Tenant Dashboard
 * Wird nur angezeigt, wenn ein Tenant ausgewählt ist
 */
export const DashboardNavLink: React.FC = () => {
  const { selectedTenantID } = useTenantSelection()

  // Nur anzeigen, wenn ein Tenant ausgewählt ist
  if (!selectedTenantID) {
    return null
  }

  return (
    <a
      href="/admin/tenant-dashboard"
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '0.5rem',
        padding: '0.75rem 1rem',
        color: 'var(--theme-elevation-800)',
        textDecoration: 'none',
        fontSize: '0.875rem',
        borderBottom: '1px solid var(--theme-elevation-100)',
        transition: 'background-color 0.15s ease',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.backgroundColor = 'var(--theme-elevation-50)'
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.backgroundColor = 'transparent'
      }}
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <rect x="3" y="3" width="7" height="7" />
        <rect x="14" y="3" width="7" height="7" />
        <rect x="14" y="14" width="7" height="7" />
        <rect x="3" y="14" width="7" height="7" />
      </svg>
      <span>Tenant Dashboard</span>
    </a>
  )
}

export default DashboardNavLink