import * as Skeleton from '#/components/web/Skeleton';
import { m } from '#/paraglide/messages';
import type { SearchHistoryEntry } from '#/storage';
import type { ListRow } from './model';
import * as styles from './RecentProfilePendingRow.css';
import { RecentRemoveButton } from './RecentRemoveButton';
/** holds a recent profile's slot with a skeleton while its view is still hydrating. */
export function RecentProfilePendingRow({
onRemoveRecent,
row,
}: {
onRemoveRecent: (entry: SearchHistoryEntry) => void;
row: Extract<ListRow, { kind: 'recentProfilePending' }>;
}) {
return (
<div className={styles.row}>
<div className={styles.item}>
<div className={styles.avatar}>
<Skeleton.Circle size={36} />
</div>
<span className={styles.text}>
<Skeleton.Text size="md" width={140} />
<Skeleton.Text color="contrast_25" size="md_sub" width={90} />
</span>
</div>
<RecentRemoveButton
label={m['components.web.search.recent.remove']()}
onRemove={() => onRemoveRecent({ kind: 'profile', did: row.did })}
/>
</div>
);
}