'use client';

import Link from 'next/link';

type Tab = { id: string; label: string };

const USER_TABS: Tab[] = [
  { id: 'profil', label: 'Min profil' },
  { id: 'databas', label: '🗄️ Databas' },
];
const ADMIN_TABS: Tab[] = [
  { id: 'profil', label: 'Min profil' },
  { id: 'anvandare', label: '👥 Användare' },
  { id: 'databas', label: '🗄️ Databas' },
  { id: 'forslag', label: '⏳ Förslag' },
  { id: 'ai', label: '🤖 AI' },
];

type Props = {
  activeTab: string;
  isAdmin: boolean;
};

export default function ProfileTabs({ activeTab, isAdmin }: Props) {
  const tabs = isAdmin ? ADMIN_TABS : USER_TABS;

  return (
    <div
      style={{
        display: 'flex',
        gap: '0.25rem',
        borderBottom: '2px solid #e5e7eb',
        marginBottom: '2rem',
      }}
    >
      {tabs.map((tab) => {
        const active = tab.id === activeTab;
        return (
          <Link
            key={tab.id}
            href={`/profil?tab=${tab.id}`}
            style={{
              padding: '0.6rem 1.2rem',
              textDecoration: 'none',
              fontWeight: active ? 600 : 400,
              fontSize: '0.95rem',
              color: active ? '#2563eb' : '#555',
              borderBottom: active ? '2px solid #2563eb' : '2px solid transparent',
              marginBottom: '-2px',
              borderRadius: '4px 4px 0 0',
              background: active ? '#eff6ff' : 'transparent',
              transition: 'background 0.15s',
            }}
          >
            {tab.label}
          </Link>
        );
      })}
    </div>
  );
}