1
import { useId, useState } from 'react';
2
import type { Track } from '@/shared/contracts/track.ts';
3
import { AnchoredDialog } from '@/client/ui/anchored-dialog.tsx';
4
 
5
export function TrackMetadata({ track }: { track?: Track }) {
6
  const id = useId();
7
  const [anchor, setAnchor] = useState<HTMLButtonElement | null>(null);
8
  return (
9
    <>
10
      <button
11
        type="button"
12
        className="min-w-0 flex-1 text-left enabled:hover:underline underline-offset-4"
13
        disabled={!track}
14
        aria-label={track ? `Track information: ${track.title}` : 'Music'}
15
        aria-haspopup="dialog"
16
        aria-expanded={!!anchor && !!track}
17
        aria-controls={anchor && track ? id : undefined}
18
        onClick={(event) => setAnchor(event.currentTarget)}
19
      >
20
        <span className="block truncate text-base leading-6 font-medium" data-testid="track-title">
21
          {track?.title ?? 'Music'}
22
        </span>
23
        <span
24
          className="mt-0.5 block h-4.5 truncate text-xs leading-4.5 text-muted"
25
          data-testid="track-artist"
26
        >
27
          {track?.artist ?? ''}
28
        </span>
29
      </button>
30
      <AnchoredDialog
31
        id={id}
32
        closeLabel="Close track information"
33
        anchor={track ? anchor : null}
34
        title={track?.title}
35
        onClose={() => setAnchor(null)}
36
      >
37
        {track?.artist ? <p>{track.artist}</p> : null}
38
      </AnchoredDialog>
39
    </>
40
  );
41
}