import type { AppBskyFeedDefs } from '@atcute/bluesky';
import { profileTarget } from '#/lib/routes/targets';
import { useSession } from '#/state/session';
import { ProfileHoverCard } from '#/components/ProfileHoverCard';
import { Text } from '#/components/Text';
import { InlineLinkText } from '#/components/web/Link';
import RepostIcon from '#/icons/central/ArrowsRepeatRightLeft_round_outlined_radius1_stroke2.svg';
import PinIcon from '#/icons/central/Thumbtack_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';
import * as css from './PostFeedReason.css';
// every reason line shares one look: low-contrast, medium-weight, clamped to a single line.
const reasonText = {
color: 'textContrastMedium',
size: 'md_sub',
numberOfLines: 1,
weight: 'medium',
} as const;
export function PostFeedReason({
reason,
onOpenReposter,
}: {
reason: AppBskyFeedDefs.ReasonRepost | AppBskyFeedDefs.ReasonPin;
onOpenReposter?: () => void;
}) {
const { currentAccount } = useSession();
if (reason.$type === 'app.bsky.feed.defs#reasonRepost') {
const by = reason.by;
const isOwner = by.did === currentAccount?.did;
const reposter = by.handle;
return (
<div className={css.includeReason}>
<RepostIcon className={css.reasonIcon} />
<ProfileHoverCard actor={by.did}>
<InlineLinkText
{...reasonText}
onPress={onOpenReposter}
to={profileTarget(by.did)}
label={isOwner ? m['view.posts.repost.byYou']() : m['view.posts.repost.by']({ reposter })}
>
{isOwner ? m['view.posts.repost.byYou']() : m['view.posts.repost.by']({ reposter })}
</InlineLinkText>
</ProfileHoverCard>
</div>
);
}
if (reason.$type === 'app.bsky.feed.defs#reasonPin') {
return (
<div className={css.includeReason}>
<PinIcon className={css.reasonIcon} />
<Text {...reasonText}>{m['view.posts.feed.pinnedBadge']()}</Text>
</div>
);
}
}